Sometimes, we want to stretch child div height to fill parent that has dynamic height with CSS.
In this article, we’ll look at how to stretch child div height to fill parent that has dynamic height with CSS.
How to stretch child div height to fill parent that has dynamic height with CSS?
To stretch child div height to fill parent that has dynamic height with CSS, we use flexbox.
For instance, we write
div#container {
padding: 20px;
background: #f1f1f1;
display: flex;
}
.content {
width: 150px;
background: #ddd;
padding: 10px;
margin-left: 10px;
}
to make the div with id container a flex container with display: flex;.
Then the elements inside will stretch to fill the container’s height.
Conclusion
To stretch child div height to fill parent that has dynamic height with CSS, we use flexbox.
