Why does min-height with percentage work without container height?

Question

According to css specification on min/max-height, if I don't provide a fixed height for the containing block any percentage min-height value will be treated as 0. I have the following example showing that this is either implemented with some quirks or I'm missing something very obvious.

What I want to achieve with this layout

A 2 column layout with the container having dynamic height depending on the columns height
The left column should float above the right column
Both the left and the right column should get the height of the largest column (align-items: stretch)

p {
  /*Comment out to display more content*/
  display: none;
}

.floating-panel-content {
  position: relative;
  z-index: 1;
  background: rgba(0, 100, 0, 0.9);
  float: left;
  width: 100px;

  /*Why does this work? I didn't provide any explicit height.*/
  min-height: 100%;
}


.container {
  display: flex;
  width: 300px;
  outline: 1px solid red;
  align-items: stretch;
}

.main-panel {
  background: blue;
}

img {
  display: block;
}

.floating-panel {
  flex: 0 0 0;
  width: 0;
}

<div class="container">
  <div class="floating-panel">
    <div class="floating-panel-content">
      Floating content
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque maxime aperiam saepe, quia error reiciendis dolorem! Natus facere aliquam sit quisquam, mollitia debitis ullam assumenda atque beatae saepe labore ab.
      </p>
    </div>
  </div>
  <div class="main-panel">
    <img src="http://placehold.it/300x300">
  </div>
</div>
Some content after .container

Float has nothing to do with it -remove the float and it still stretches - I think it's because you are in a flex container. — Pete, Mar 14 '18 at 16:12

Michael Benjamin · Accepted Answer · 2018-03-14T17:00:47.983

You wrote:

According to css specification on min/max-height, if I don't provide a fixed height for the containing block any percentage min-height value will be treated as 0.

That's 100% correct. That's what the spec says.

<percentage>

Specifies a percentage for determining the used value. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0 (for min-height) or none (for max-height).

https://www.w3.org/TR/CSS22/visudet.html#min-max-heights

You wrote:

I have the following example showing that this is either implemented with some quirks or I'm missing something very obvious.

Also correct. You're not missing anything, but you're on the right track with "some quirks".

For many years, major browsers adhered to a strict interpretation of spec language with regard to percentage heights. In other words, without an explicitly defined height on the parent, a percentage height on the child wouldn't work as intended. It would resolve to auto or 0 or none, per the respective rule for height, min-height or max-height.

In recent years, however, most major browsers have loosened their interpretation and now accept other forms of height – such as flex heights – as an acceptable parent reference.

The only browser that appears to continue with the strict interpretation is Safari. Without a defined height (using the height property) on the parent, percentage heights on the children will fail.

It doesn't help matters that the height property definition hasn't been updated since 1998 (CSS2). With the advent of multiple new ways to establish box height, this definition is thoroughly obsolete. It appears that browser makers aren't waiting around for an update from the W3C.

For more details and examples see: Chrome / Safari not filling 100% height of flex parent

Why does min-height with percentage work without container height?

1 Answers1