入れ子になったフレックスボックス レイアウトの Firefox で overflow-y が期待どおりに動作しないのはなぜですか?

ネストされた Flexbox レイアウトに関する Firefox のオーバーフロー Y の問題

ネストされた Flexbox で設計された幅 100%、高さ 100% のレイアウトでは、予期しないエラーが発生しますこの動作は、overflow-y が正しく機能していない Firefox で発生します。

質問:

提供された CSS コードで overflow-y が期待どおりに動作しないのはなぜですか。 Firefox で不正なスクロールバーが表示されますか?

回答:

この問題は、フレックス項目のデフォルトの最小サイズ設定動作が原因で発生します。フレックス項目は、子孫に適用される overflow-y を無視して、子の固有のサイズに基づいて最小サイズを導出します。

overflow-y: [hidden|scroll|auto] を持つ要素がフレックス項目内に配置されると、対応する祖先フレックス項目で min-width:0 (水平フレックス コンテナの場合) または min-height:0 (垂直フレックス コンテナの場合) を設定する必要があります。これにより、デフォルトの最小サイズ設定動作が無効になり、フレックス項目が子の min-content サイズ未満に縮小できるようになります。

問題を解決するには、.level-0-row2 ルールに min-height:0 を追加します。次の更新された CSS コードに示されているように:

<code class="css">.level-0-row2 {
  ...
  min-height: 0;
  flex: 1;
  border: 1px solid black;
  ...
}</code>

これにより、.level-0-row2 フレックス項目がその子の overflow-y を考慮し、最小コンテンツ サイズ未満に縮小できるようになり、適切なコンテンツが有効になります。 Firefox のオーバーフロー動作。

以上が入れ子になったフレックスボックス レイアウトの Firefox で overflow-y が期待どおりに動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。