如果在Chrome中运行下面提到的代码，就会得到所需的结果。包装这两个部分的内部容器(当浏览器窗口缩小时(将显示一个垂直滚动条。
然而，如果你在Edge或Firefox中做同样的事情，浏览器只是在整个页面上显示一个垂直滚动条，而不是在给定的容器元素上。
我如何才能让它至少在现代浏览器中——Edge、Chrome和Firefox——保持一致？
我有以下内容：
body {
margin: 0;
}
.header,
.footer,
.messagebar {
display: flex;
height: 4rem;
padding: 10px 50px;
border: 1px solid lightgray;
}
.container,
.section {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.scrollable {
overflow-y: auto;
overflow-x: hidden;
}
.section {
margin: 10px 20px;
flex-basis: 45%;
flex-grow: 0;
}
.content {
display: flex;
flex-grow: 1;
}<body style="display:flex;flex-direction:column;flex-grow:1;height:100vh;">
<div class="header">This is the header</div>
<div class="content">
<div class="container">
<div class="menu">This is the menu</div>
<div class="container">
<div class="container scrollable" style="flex-direction: row;flex-wrap:wrap">
<div class="section">
<div>This is some content ...</div>
<div>A table of data</div>
</div>
<div class="section">
<div>This is further content ...</div>
<div>A table of other data</div>
</div>
</div>
</div>
<div class="messagebar">This is a message</div>
</div>
</div>
<div class="footer">This is the footer</div>
</body>评论
要确切了解我在说什么，请运行代码片段，然后选择Full Page选项。
一旦页面显示在自己的窗口中，就可以调整窗口大小。水平调整大小应使右侧部分在左侧部分下方换行。垂直调整大小，直到得到一个垂直滚动条。在Chrome和Firefox中都这样做，你会在垂直滚动条中看到差异。
我认为没有定义某个高度。添加特定高度或最大高度，如下所示。
.scrollable {
overflow-y: auto;
overflow-x: hidden;
max-height: 92px;
}
感谢CssTricks的Pogany！
答案是将以下内容添加到我的.scrollable类中
.scrollable{
...
height: calc(100vh - 14rem);
}
这似乎很有魅力！