How to stretch child div height to fill parent that has dynamic height with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *