How to force child div to be 100% of parent div’s height without specifying parent’s height with CSS?

Spread the love

Sometimes, we want to force child div to be 100% of parent div’s height without specifying parent’s height with CSS.

In this article, we’ll look at how to force child div to be 100% of parent div’s height without specifying parent’s height with CSS.

How to force child div to be 100% of parent div’s height without specifying parent’s height with CSS?

To force child div to be 100% of parent div’s height without specifying parent’s height with CSS, we use flexbox.

For instance, we write

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

to add a div with divs inside.

Then we write

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

to make the outer div a flex container with display: flex;.

Then the child divs will fill the parent div’s height.

Conclusion

To force child div to be 100% of parent div’s height without specifying parent’s height with CSS, we use flexbox.

Leave a Reply

Your email address will not be published.