为什么带百分比的最小高度在没有容器高度的情况下起作用?

Question

根据 css 关于最小/最大高度的规范，如果我不为包含块提供固定高度，任何百分比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

你写道：

根据 css 关于最小/最大高度的规范，如果我没有为包含块提供固定高度min-height任何百分比值都将被视为0。

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

<percentage>

指定用于确定已用值的百分比。百分比 根据生成的框的高度计算 包含块。如果包含块的高度不是 明确指定(即，它取决于内容高度)，并且这 元素不是绝对定位的，百分比值被处理 作为0(min-height)或none(max-height)。

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

你写道：

我有以下示例显示这要么是通过一些怪癖实现的，要么我错过了一些非常明显的东西。

也正确。你没有错过任何东西，但你走在"一些怪癖"的正确轨道上。

多年来，主要浏览器坚持对规范语言关于百分比高度的严格解释。换句话说，如果没有明确定义的父级height，子项的身高百分比将无法按预期工作。它将根据height、min-height或max-height的相应规则，解析为auto或0或none。

然而，近年来，大多数主流浏览器已经放宽了解释，现在接受其他形式的高度 - 例如flex height - 作为可接受的父参考。

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

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

有关更多详细信息和示例，请参阅： Chrome/Safari 未填充 100% 弹性父级高度