为什么 min-height with percentage 在没有容器高度的情况下工作？

Question

根据 css specification on min/max-height，如果我没有为包含块提供固定高度，任何百分比 min-height 值都将被视为 0。我有以下示例，表明这是通过一些怪癖实现的，或者我遗漏了一些非常明显的东西。

我想用这个布局实现什么

2 列布局，容器具有动态高度，具体取决于列的高度
左栏应浮动在右栏上方
左列和右列都应获得最大列的高度(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

Answer 1

您写道：

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.

100% 正确。这就是规范所说的。

<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

您写道：

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

也正确。你没有遗漏任何东西，但你在 "some quirks".

的正确轨道上

多年来，主流浏览器在百分比高度方面坚持对规范语言的严格解释。换句话说，如果没有在父级上明确定义 height，子级的身高百分比将无法按预期工作。根据 height、min-height 或 max-height.

的相应规则，它将解析为 auto 或 0 或 none

然而，近年来，大多数主要浏览器都放宽了对它们的解释，现在接受其他形式的高度——例如 flex 高度——作为可接受的父级参考。

似乎唯一继续严格解释的浏览器是 Safari。如果父项没有定义高度（使用 height 属性），子项的百分比高度将失败。

height 属性定义自 1998 年 (CSS2) 以来就没有更新过，这无济于事。随着多种确定盒子高度的新方法的出现，这个定义已经完全过时了。看来浏览器制造商并没有等待 W3C 的更新。

有关更多详细信息和示例，请参阅：

为什么 min-height with percentage 在没有容器高度的情况下工作？

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

css

specifications

css-float

language-lawyer

flexbox