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

我在一个也使用最大高度的容器中有一个最大高度为 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;
}

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