Sometimes, we want to expand floated child div’s height to parent’s height with CSS.
In this article, we’ll look at how to expand floated child div’s height to parent’s height with CSS.
How to expand floated child div’s height to parent’s height with CSS?
To expand floated child div’s height to parent’s height with CSS. we use flexbox.
For instance, we write
<div class="parent">
<div>column 1</div>
<div>column 2</div>
</div>
to add nested divs.
Then we write
.parent {
display: flex;
}
.parent > div {
flex: 1;
}
to make the outer div a flex container with display: flex;.
Then we make the inner divs fill the height of the outer div with flex: 1;.
Conclusion
To expand floated child div’s height to parent’s height with CSS. we use flexbox.
