How to expand floated child div’s height to parent’s height with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published.