Inside a parent with a minimum height child, there is a 100% chance that the child will not inherit height.

Problem

Setting min-height: 100 percent ; allowed me to have a div container occupy at least the whole height of a page. When I add a nested div with height: 100% ;, however, it does not stretch to the container’s height. Is there a way to make it better?

Asked by lamefun

Solution #1

To the parent container, add height: 1px. Chrome, Firefox, and Safari all support it.

Answered by Kushagra Gour

Solution #2

Children of parents with min-height cannot inherit the height property, according to a documented webkit (chrome/safari) bug: https://bugs.webkit.org/show bug.cgi?id=26559

Firefox appears to be affected as well (I can’t test on IE at the moment).

Possible workaround:

When the inner element has absolute placement, the problem isn’t visible.

See http://jsfiddle.net/xrebB/

On April 10, 2014, I made a change.

I did some further study because I’m currently working on a project that requires parent containers with min-height and child elements inheriting the container’s height.

First, I’m no longer certain that the current browser behavior is a bug. The CSS2.1 specifications state:

Because I’m not specifically providing the height of my container when I use a min-height, my element should have an auto height. That’s exactly what Webkit, as well as all other browsers, do.

Second, I discovered a workaround:

When I use display:table with height:inherit on my container element, it behaves identically as if I gave it a min-height of 100%. And, more significantly, if I set the child element to display:table-cell, the height of the container element will be perfectly inherited – whether it’s 100 percent or more.

Full CSS:

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

The markup:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

See http://jsfiddle.net/xrebB/54/.

Answered by ptriek

Solution #3

I thought I’d post this because I hadn’t seen it before and it’s what I used to fix my problem.

SOLUTION: min-height: inherit;

I had a parent who had a minimum height requirement, and I wanted a child who met that need.

As a result, the child now acts as though he or she is 100 percent of the minimum height.

I hope this is useful to some people:)

Answered by Kevin Upton

Solution #4

This was added by @jackocnr in a comment, but I missed it. This, I believe, is the ideal strategy for modern browsers.

If the container is too tiny, it causes the inner element to fill the entire container, but if it is too large, it expands the container’s height.

#containment {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#containment-shadow-left {
  flex: 1;
}

Answered by JW.

Solution #5

Kushagra Gour’s method works (at least in Chrome and Internet Explorer) and fixes the problem without the need for display: table; and display: table-cell;. http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU See plunker: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

Setting min-height: 100%; height: 1px; on the outer div ensures that its actual height is at least 100%, as necessary. It also allows the inner div to inherit the height correctly.

Answered by Jeremy Hewett

Post is based on https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height