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

Question

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

我试图了解对我来说似乎是出乎意料的行为：

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

测试用例：http：//jsfiddle.net/bq4Wu/16/

.container {  
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; }img { 
    display: block;
    max-height: 100%; 
    max-width: 100%; }

但是，如果父级具有明确的高度，则这是固定的：

测试用例：http：//jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;}

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

Answer 1

当您为max-height孩子指定百分比时，它是父母的实际身高的百分比，而不是父亲的百分比max-height，奇怪的是。这同样适用于max-width。因此，当您没有在父级上指定显式高度时，则没有用于max-height计算子级的基本高度，因此max-height计算none，允许子级尽可能高。现在作用于孩子的唯一其他约束是max-width它的父，并且因为图像本身比它宽，所以它向上溢出容器的高度，以便保持其纵横比，同时仍然尽可能大。当你做指定家长一个明确的高度，那么孩子知道它是在显式高度的至多100％。这允许它被约束到父亲的高度（同时仍然保持其纵横比）。