Child inside parent with min-height: 100% not inheriting height

html

responsive-design

css-grid

flexbox

byNikita Barsukov·Sep 14, 2024

Leverage display: flex; in the parent and flex: 1; in the child to make a child inherit a parent's min-height. This approach allows the child to fill the parent's height without the need for explicit height definitions.

.parent {
  display: flex; /* Flex it like Beckham */
  min-height: 100vh; /* At least as tall as the viewport */
}

.child {
  flex: 1; /* Time to spread your wings, kiddo */
}

<div class="parent">
  <div class="child">
    Content
  </div>
</div>

This lean and mean solution optimizes the power of flexbox for effective height management.

A deep dive into alternative solutions

Let's explore other tricks up our sleeve to make a child inherit its parent's min-height.

Positioning to the rescue

You can ensure the nested div inherits the full height of its parent by applying position: relative; in the parent and position: absolute; in the child.

.parent {
  position: relative; /* Offers a shoulder to the child */
  min-height: 100vh; /* Parent can't be shorter than viewport */
}

.child {
  position: absolute; /* Like Spiderman on the wall */
  top: 0; 
  left: 0;
  width: 100%; /* Wall-to-wall coverage, literally */
  height: 100%; /* Like a teenager refusing to leave the nest */
}

The old school table layout

If you're dealing with ancient browsers with limited flexbox support, you can imitate a table layout using display: table; and display: table-cell; for parent and child respectively.

.parent {
  display: table; 
  min-height: 100vh; /* Defining height also helps. You know, just in case */
  width: 100%;
}

.child {
  display: table-cell; /* Behaves like the obedient child of good ol' table */
}

The futuristic grid system

Using the impressive CSS Grid, you can set the parent as a grid container and the child to occupy the full space.

.parent {
  display: grid; /* Welcome master Grid */
  min-height: 100vh;
}

.child {
  align-self: stretch; /* Grow tall kiddo, sky's the limit */
}

Know thy limitations

Children can't inherit min-height directly due to a CSS constraint (WebKit bug report). The above methods serve as workarounds to handle this limitation.