我正在尝试创建一个网页，其中包括一个固定高度的“header” div，然后是下面的“content” div。在该内容div中有几个不同的div，其中包含实际的页面内容。在实际项目中，所有这些元素的高度可能因不同的屏幕和用户而变化，因为它们的内容主要由PHP生成。
抱歉，如果这个解释不清楚，但以下演示了我目前所拥有的：
https://codepen.io/anon/pen/ZJPgWm
（代码格式不佳，一些值看起来有点奇怪，因为我只是快速地模仿了我的实际项目）。
在Chrome浏览器中，#inner div内显示滚动条。这正是我想要的。
在Firefox和MS Edge浏览器中，#inner div的溢出内容被切掉了，因此无法看到该内容（除非屏幕更高）。
需要注意的是，原因似乎是在Chrome浏览器中，#inner和#content div的高度受控制，使它们的边界框不超出#main div的边界。然而，在Firefox浏览器中，它们的边界框延伸到页面底部以下（由开发者工具显示）。
我正在寻找一种方法，使所有浏览器都能给出当前由Chrome浏览器提供的结果。最好能够解释哪个浏览器是“正确”的，以及它们为什么不同，这也会有所帮助。
请注意，如果可能的话，我想避免使用JS。感谢任何帮助或建议。
#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浏览器提供的结果。最好能够解释哪个浏览器是“正确”的，以及它们为什么不同，这也会有所帮助。
请注意，如果可能的话，我想避免使用JS。感谢任何帮助或建议。