私は固定された高さの 'ヘッダー' div、そしてその下に 'content' divを持つWebページを作ろうとしています。そのコンテンツdivには、実際のページコンテンツを含むいくつかの異なるdivがあります。実際のプロジェクトでは、コンテンツがPHPによって生成されるため、これらの要素の高さはスクリーンやユーザーによって異なる場合があります。ChromeとFirefox/Edgeで 'flex-grow'の動作が異なるのはなぜですか？
申し訳ありませんが、その説明は不明であるが、以下は、私がこれまで持っているものを示していた場合： https://codepen.io/anon/pen/ZJPgWm （コードが不十分フォーマットされて、私はちょうど一緒にすばやくとしてこれを投げてきたので、値の一部は、ビット奇妙に見えます私の実際のプロジェクトの模造）。 Chromeで
#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 divと#content divの高さが制御されているため、境界ボックスが#main divの境界を超えないようになっているようです。しかし、firefoxでは、その境界ボックスはページの下側に広がっています（開発者ツールで示されています）。
私が探しているのは、すべてのブラウザが現在クロムによって与えられている結果を返す方法です。理想的には、どのブラウザが「正しい」ものであるのか、それがなぜ違うのかについての説明も役立ちます。
可能な限りJSを使用しないでください。どんな助けやアドバイスも感謝しています。