How to expand a parent div to the height of its children with CSS?

Spread the love

Sometimes, we want to expand a parent div to the height of its children with CSS.

In this article, we’ll look at how to expand a parent div to the height of its children with CSS.

To expand a parent div to the height of its children with CSS, we set the parent div’s height of the div to max-content.

For instance, we add some elements with

<body>
  <div id="parent">
    <div id="childRightCol">/*Content*/</div>
    <div id="childLeftCol">/*Content*/</div>
  </div>
</body>

Then we write

#parent {
  height: max-content;
}

to make the div with ID parent’s height max-content to make it fit to the body.

To expand a parent div to the height of its children with CSS, we set the parent div’s height of the div to max-content.