我在试着理解对我来说似乎出乎意料的行为:
我在一个容器中有一个max-height为100%的元素，该容器也使用了max-height，但出乎意料的是，子元素溢出了父元素:
.container {
背景:蓝色;
填充:10 px;
max-height: 200 px;
max-width: 200 px;
｝
img {
显示:块;
max-height: 100%;
max-width: 100%;
｝
< div class = "容器" >
<img src="http://placekitten.com/400/500" />
< / div >
但是，如果父节点被指定了显式的高度，这个值是固定的:
.container {
背景:蓝色;
填充:10 px;
max-height: 200 px;
max-width: 200 px;
身高:200 px;
｝
img {
显示:块;
max-height: 100%;
max-width: 100%;
｝
< div class = "容器" >
<img src="http://placekitten.com/400/500" />
< / div >
有人知道为什么在第一个例子中子节点不尊重父节点的max-height吗?为什么需要显式高度?
与其使用max-height: 100%/100%，另一种填满所有空间的方法是使用position: absolute，将上/下/左/右设置为0。
换句话说，HTML看起来像下面这样:
<div class="flex-content">
<div class="scrollable-content-wrapper">
<div class="scrollable-content">
1, 2, 3
</div>
</div>
</div>
.flex-content {
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}
.scrollable-content-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.scrollable-content {
/* Add styling here */
}
试试下面的方法:
.flex-content {
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}
.scrollable-content-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
html {
height: 50%;
width: 50%;
}
body {
height: 100%;
width: 100%;
}
.parent {
height: 100%;
outline: 1px solid red;
}
<html>
<body>
<div class="parent">
<div class="flex-content">
<div class="scrollable-content-wrapper">
<div class="scrollable-content" id="scrollable">
1, 2, 3
</div>
</div>
</div>
</div>
<button onClick="scrollable.innerText += '\nSome more text'" style="margin-top: 1rem;">Add Line</button>
<p>
The red outline represents the parent. Click above to add a line until overflow occurs to see that the size of the parent is not increased.
</p>
</body>
</html>
我能想到的最接近这一点的例子是:
http://jsfiddle.net/YRFJQ/1/
or
.container {
background: blue;
border: 10px solid blue;
max-height: 200px;
max-width: 200px;
overflow:hidden;
box-sizing:border-box;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}
主要问题是高度占容器高度的百分比，所以它在父容器中寻找显式设置的高度，而不是max-height。
在某种程度上，我能看到的唯一方法是上面的方法，你可以隐藏溢出，但填充物仍然作为图像流入的可见空间，所以用实边代替(然后添加边界框，使它200px如果这是你需要的宽度)
不确定这是否符合你的需要，但我能做到的最好了。
