我正在尝试制作一个具有固定高度的“标头” div，然后是其下方的“内容” div的网页。在该内容div中，有几个不同的div，其中包含实际的页面内容。在实际的项目中，所有这些元素的高度在不同的屏幕和用户之间可能会有所不同，因为它们的内容主要是由PHP生成的。
抱歉，如果该解释不清楚，但是以下内容演示了我到目前为止所获得的信息：https : //codepen.io/anon/pen/ZJPgWm（代码格式不正确，某些值看起来有些奇怪，因为我已经只是为了模仿我的实际项目而迅速将它们放在一起）。
#main {
width: 90%;
min-width: 400px;
max-width: 1200px;
height: calc(100vh - 10px);
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
#head {
background-color: blue;
font-size: 3vh;
}
#content {
background-color: red;
flex-grow: 1;
display: flex;
}
#left {
width: calc(16% - 6px);
float: left;
background-color: green;
}
#inner {
font-size: 10vh;
flex-grow: 1;
width: calc(84% - 6px);
float: left;
margin-left: 8px;
margin-bottom: 10px;
flex-grow: 1;
overflow-x: hidden;
overflow-y: auto;
background-color: yellow;
}<body>
<div id="main">
<div id="head">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="content">
<div id="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div
</div>
</div>
</body>在chrome上，滚动条显示在#inner div中。这就是我要的。在firefox和MS Edge上，＃inner div的溢出内容刚刚被切断，因此无法看到该内容（没有更高的屏幕）。我应该注意到，这样做的原因似乎是在chrome中，#inner和#content div的高度受到控制，以使它们的边界框不会超出#main div的边界。但是，在firefox中，其边界框延伸到页面底部下方（由开发人员工具显示）。
我在寻找一种方法，该方法将使所有浏览器给出chrome当前提供的结果。理想情况下，解释哪种浏览器“正确”以及为什么它们不同是很有帮助的。
请注意，如果可能的话，我想避免使用JS。任何帮助或建议，不胜感激。
Flex项的min-height默认值为auto，这表示它不会收缩到其内容的大小以下，因此，当您像这样嵌套它们并将其overflow: auto放在Flex项的子项上时，需要让其知道允许其收缩。
添加min-height: 0;到您的content规则中，它们的行为将相似。
#main {
width: 90%;
min-width: 935px;
max-width: 1600px;
height: calc(100vh - 90px);
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
#head {
background-color: blue;
font-size: 20px;
}
#content {
background-color: red;
flex-grow: 1;
display: flex;
min-height: 0;
}
#inner {
font-size: 60px;
flex-grow: 1;
overflow-y: auto;
}<body>
<header>
</header>
<div id="main">
<div id="head">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="content">
<div id="inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div </div>
</div>
</body>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句