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

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.

Addressing quirks and edge cases

Here's how to tackle some common quirks and apply practical wisdom in your CSS.

Give parents a defined height

By adding height: 1px; to the parent, you allow child elements to inherit or calculate their size.

Avoid property conflicts

Using height and min-height together can cause confusion, since browsers might not know which one to prioritize.

Verify browser compatibility

Make sure to check browser support for CSS Grid and Flexbox on caniuse.com.

Visual debugging

Use background colors or borders for visual confirmation of heights and alignment during development.

Be smarter with display properties

If the traditional box model doesn't deliver, techniques like display: table and absolute positioning may save the day.

Flexbox and Grid provide more modern alternatives to overcome height inheritance issues. See our References for examples.