Expanding a parent <div> to the height of its children

Overflow control

To keep scrollbar issues at bay, apply overflow: auto; to your parent <div>:

.parent {
  // Like an overbearing parent watching over its kids
  overflow: auto;
}


Tabular alignment options

Another way to achieve this is by using display: table; for the parent <div> and display: table-row; for child <div>—like a strict school teacher ensuring the students (child <div>) line up properly:

.parent {
  // Here, we're playing the role of a traditional strict school teacher
  display: table;
}

.child {
  // ...and here are our obedient students in uniform
  display: table-row;
}


Containing content

For a parent <div> that perfectly wraps around its content, use height: max-content;:

div.parent {
  // Shrink-wrapping the kids to make sure no one strays away!
  height: max-content;
}


Clearing floating kids

When your child elements are floating around, incorporate clear: both; in a pseudo-element inside the parent and get it back under control:

.parent::after {
  // Mom's voice: "You kids better stop floating around and settle down!"
  content: "";
  display: table;
  clear: both;
}


Don't forget to remove overflow: auto if the scrollbar is not needed!

Inline-block Solution

A time-tested way that survives any browser compatibility test — setting the parent <div> to display: inline-block;;

div.parent {
  // Parenting 101: Sometimes, you have to stoop to their level
  display: inline-block;
}


Managing extra heights

When flexibility is key, don't limit yourself with a fixed height. Turn to min-height to allow the parent to expand with the content:

div.parent {
  // Like the elastic waistband of your favorite sweatpants
  min-height: 100px;
}


Tools for page-level scrolling

Sometimes, it's more user-friendly to have the entire page scroll instead of a particular <div>. This is the case for full-page layouts:

html, body {
  // Everyone loves a free ride, even if it's just a scroll
  height: 100%;
  overflow: auto;
}


Implementing changes

We'll now link you up to a jsfiddle example to look at a practical application of these techniques.

Advanced tactics with will-change

When making performance optimizations, consider will-change to tell the browser what properties are expected to change:

div.parent {
  // Like whispering in the browser's ear: "Hey, prepare for some changes!"
  will-change: height;
}


Deep dive into flexbox wraps

If you're dealing with multiple children that can wrap into new lines, flexbox has a trick up its sleeve with flex-wrap:

div.parent {
  // Wrapping gifts? Nah, wrapping children elements.
  display: flex;
  flex-wrap: wrap;
}


This allows the children to 'jump' onto a new line when there's no room left!