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.
