How to expand div to max width when float: left is set with CSS?

Spread the love

Sometimes, we want to expand div to max width when float: left is set with CSS.

In this article, we’ll look at how to expand div to max width when float: left is set with CSS.

How to expand div to max width when float: left is set with CSS?

To expand div to max width when float: left is set with CSS, we use flexbox.

For instance, we write

<div style="display: flex">
  <div style="width: 100px">menu</div>
  <div style="flex: 1">content</div>
</div>

to add nested divs.

We make the outer div a flex container with display: flex.

The inner divs will be displayed side by side.

Then we make the right div fill the remaining space with flex: 1.

Conclusion

To expand div to max width when float: left is set with CSS, we use flexbox.

Leave a Reply

Your email address will not be published. Required fields are marked *