我试图理解对我来说似乎是意外行为的内容:
我有一个元素,其最大高度为100%,位于一个也使用最大高度的容器内,但意外的是,子元素溢出了父元素:
.container {
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}
<div class="container">
<img src="http://placekitten.com/400/500" />
</div>
不过,如果给父元素设置了明确的高度,则该问题就可以得到解决:
.container {
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
height: 200px;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}
<div class="container">
<img src="http://placekitten.com/400/500" />
</div>
有人知道为什么在第一个例子中,子元素不遵守其父元素的最大高度吗?为什么需要明确设置高度?