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.
