最大身高的孩子：100％溢出父母

Question

我试图了解什么对我来说似乎是意外的行为：

我在容器内有一个最大高度为100％的元素，该元素也使用最大高度，但是，出乎意料的是，子代溢出了父代：

.container {  
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; 
}

img { 
    display: block;
    max-height: 100%; 
    max-width: 100%; 
}

但是，如果给定父级的显式高度，则此问题已解决：

.container {  
    height: 200px;
}

有谁知道为什么孩子在第一个例子中不尊重父母的最大身高？为什么需要一个明确的高度？

Answer 1

当您指定的百分比max-height上一个孩子，这是父母的实际高度的百分比，而不是父母的max-height，奇怪的。同样适用于max-width。

因此，如果您没有在父级上指定显式的身高，那么就不会max-height从中计算出孩子的基本身高，因此max- height计算为none，可以使孩子尽可能高。现在，作用于孩子的唯一其他约束是max-width其父对象的约束，并且由于图像本身的高度大于宽度，因此为了保持其长宽比，同时仍要尽可能地大，它会向下溢出容器的高度。

当您 确实 为父母指定了明确的身高时，孩子就会知道它必须是该明确的身高的最多100％。这样就可以将其约束到父级的高度（同时仍保持其宽高比）。