How to expand a div to fill the remaining width with CSS?

Spread the love

Sometimes, we want to expand a div to fill the remaining width with CSS.

In this article, we’ll look at how to expand a div to fill the remaining width with CSS.

How to expand a div to fill the remaining width with CSS?

To expand a div to fill the remaining width with CSS, we use flexbox.

For instance, we write

<div id="box">
  <div id="a">Tree</div>
  <div id="b">View</div>
</div>

to add divs inside a div.

Then we write

#box {
  display: flex;
}

#b {
  flex-grow: 100;
  border: 1px solid green;
}

to make the outer div a flex container with

#box {
  display: flex;
}

Then we make the 2nd div fill the remaining height with flex-grow: 100;.

Conclusion

To expand a div to fill the remaining width with CSS, we use flexbox.

Leave a Reply

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