3
我正在嘗試製作一個網頁，其中包含固定高度的「標題」div，然後是其下的「內容」div。在內容div中有幾個不同的div，其中包含實際的頁面內容。在實際的項目中，所有這些元素的高度在不同的屏幕和用戶之間可能會有所不同，因爲它們的內容主要由PHP生成。爲什麼'flex-grow'在Chrome和Firefox/Edge中表現不同？
很抱歉，如果這個解釋不清，但下面演示了什麼，我已經這麼遠： 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>在鉻，滾動條在#inner DIV內示出。這就是我要的。 在firefox和MS Edge上，#inner div的溢出內容被截斷，所以不可能看到該內容（沒有更高的屏幕）。 我應該注意，原因似乎是，在Chrome中，#inner和#content div的高度被控制，使得它們的邊界框不會超出#main div的邊界。但是，在Firefox中，它們的邊界框延伸到頁面底部以下（由開發人員工具顯示）。
我在找的是一種方法，它可以讓所有的瀏覽器給出當前由chrome給出的結果。理想情況下，解釋哪個瀏覽器是「正確的」，以及它們爲什麼不同也是有幫助的。
請注意，我想盡可能避免使用JS。任何幫助或建議表示讚賞。