我知道通常min-height优先于max-height，但是，我有一个flex child，它设置了min-height：100%，但它遵守了max-height设置。
Here is a codepen demonstrating.
HTML
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>字符串
CSS
.wrapper {
display: flex;
width: 100%;
}
.left, .right {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
}
.left {
background-color: red;
width: 100%;
max-height: 200px;
min-height: 100%; // this is ignored
}
.right {
background-color: green;
height: 300px;
}型
如果我将min-height改为一个静态值（比如Codepen中的250 px），它会遵守它。但是，当它被设置为100%时，它不会遵守它，即使它的flex兄弟（和它的容器）比它长得更高。当我在flex容器上设置一个高的静态高度（比如Codepen中的400 px）时，它也会遵守min-height：100%。
我在规范或其他任何地方都找不到任何东西来解释为什么这里忽略了min-height：100%，所以我只是想了解为什么会发生这种情况。
谢谢你，谢谢
1条答案
按热度按时间nqwrtyyt1#
我可能是错的，但这就是我发现的。
首先，在你的例子中，根据规范，父div
<div class="wrapper">的计算高度是0（情况4）。即使因为子div<div class="right"></div>而看起来是300 px。元素的高度是从其顶部内容边缘到以下第一个适用边缘的距离：
1.最后一行框的底部边缘（如果该框建立了包含一行或多行的内联格式设置上下文）
1.其最后一个流入子元素的底部（可能折叠）边距的底部边缘，如果子元素的底部边距不与元素的底部边距折叠
1.最后一个流入子元素的下边框边缘，其上边距不随元素的下边距折叠
1.零，否则
因此，在左边的div上使用
min-height: 100%，计算结果为min-height: 0，因为它的父元素的隐式计算高度为0。字符串
实际上，
型
这就是为什么声明
min-height: 100%不会覆盖max-height: 200px，因为它的值为0，并且不大于max-height的值。然而，当你在parent或min-height上设置显式高度时，min-height属性会覆盖docs.中声明的max-height，因为现在声明
min-height: 100%的值大于max-height的值。