我有一个父元素,包含两个子元素,使用flexBox显示在彼此之上.此父元素的max-height属性设置为特定值.因此,只要内容很短,父元素应该保持较小,随着内容的增长,父元素随之增长,直到满足其最大高度.此时我们应该在内容元素上看到滚动条.
#container {
display: flex;
max-width: 80vw;
max-height: 100px;
flex-direction: column;
}
#content {
overflow-y: auto;
}
/* styling - ignore */
#container {
border: 2px solid black;
margin-bottom: 1em;
}
#header {
background-color: rgb(245,245,245);
padding: 10px;
}
#content {
background-color: rgb(255,255,255);
padding: 0 10px;
}
<div id="container">
<div id="header">Header</div>
<div id="content">
<p>Everything works as supposed to,move along</p>
</div>
</div>
<div id="container">
<div id="header">Header</div>
<div id="content">
<p>Very long content</p>
<p>Very long content</p>
<p>Very long content</p>
<p>Very long content</p>
</div>
</div>
这适用于Firefox和Chrome.在Internet Explorer上,虽然未显示内容元素中的滚动条;相反,内容元素从父元素溢出.
解决方法
尝试高度：100px而不是max-height：100px;在#container上,即：
#container {
display: flex;
max-width: 80vw;
height: 100px;
flex-direction: column;
}
#container {
display: flex;
max-width: 80vw;
height: 100px;
flex-direction: column;
}
#content {
overflow-y: auto;
}
/* styling - ignore */
#container {
border: 2px solid black;
margin-bottom: 1em;
}
#header {
background-color: rgb(245,move along</p>
</div>
</div>
<div id="container">
<div id="header">Header</div>
<div id="content">
<p>Very long content</p>
<p>Very long content</p>
<p>Very long content</p>
<p>Very long content</p>
</div>
</div>
