最高身高的孩子：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％。这允许它被约束到父亲的高度（同时仍然保持其纵横比）。