How to make a div’s height expand with its content with CSS?

Sometimes, we want to make a div’s height expand with its content with CSS.

In this article, we’ll look at how to make a div’s height expand with its content with CSS.

How to make a div’s height expand with its content with CSS?

To make a div’s height expand with its content with CSS, we use flexbox.

For instance, we write

<div class="flex-container">
  <header>
    <h1>Header</h1>
  </header>

  <section class="content">Content</section>

  <footer>
    <h4>Footer</h4>
  </footer>
</div>

to add some nested elements.

Then we write

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3f51b5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #ffc107;
  color: #333;
}

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

We set its flex direction to column with flex-direction: column;.

And we make the section element with class content will the remaining height of the container with

section.content {
  flex: 1;
}

Conclusion

To make a div’s height expand with its content with CSS, we use flexbox.