Flex の子が Firefox では親の高さを超えるのに、Chrome では超えないのはなぜですか?

子フレックス項目が親の高さを超えないようにする

フレックス コンテナーに flex: 1 と overflow-y の両方を持つ子項目が含まれる場合:スクロールすると、Chrome と Firefox の間に差異が生じます。 Chrome では、子項目は親の高さを超えずに残りのスペースを埋めるように拡張され、その結果スクロールバーが表示されます。ただし、Firefox では、子項目の高さが増加し、親を超えます。

解決策

Firefox でこの問題を解決するには、flex: 1 を flex: に置き換えます。 1 1 1ピクセル。これにより、1 ピクセルの固定最小基準が設定され、コンテンツのオーバーフローがある場合でも子項目が親の高さを超えないようになります。

改訂コード

<code class="css">#messagelist {
  flex: 1 1 1px;
}

#messagecontents {
  flex: 1 1 1px;
}</code>

この変更により、子項目はフレックス コンテナー内に含まれたままで、利用可能なスペースを埋めるように展開されるようになります。 Chrome と Firefox の両方にスクロールバーが表示され、ユーザーは表示領域を超えてコンテンツを表示できるようになります。

以上がFlex の子が Firefox では親の高さを超えるのに、Chrome では超えないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。