我试图理解看起来是对我意想不到的行为：
我有一个max-height为100％的容器内的元素，也使用max-height，但是，意外的是，子元素溢出父：
测试用例：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;
}
有没有人知道为什么孩子不会在第一个例子中尊重其父的最大高度？为什么需要显式高度？
解决方法
当您为子级指定max-height的百分比时，它是父级的实际高度的百分比，而不是父级的最大高度，
oddly enough.这同样适用于
max-width。
所以，当你没有在父对象上指定显式高度时，子对象的最大高度没有基本高度，因此max-height计算为none，允许子对象尽可能高。现在唯一影响孩子的其他约束是它的父元素的最大宽度，并且由于图像本身比它宽，所以它向下溢出容器的高度，以便保持其长宽比，同时仍然大到可能整体。
当你为父节点指定一个显式高度时，子节点知道它必须是该显式高度的100％。这允许它被约束到父的高度(同时仍然保持其高宽比)。
