Firefox の「overflow-y」がネストされた Flexbox と矛盾するのはなぜですか?

ネストされたフレックスボックスでの Firefox の一貫性のない overflow-y

CSS3 で複雑なレイアウトを作成する場合、overflow-y プロパティはコンテンツのスクロールに重要になる可能性があります特定のセクション内。ただし、ネストされたフレックスボックス要素が関係している場合、Firefox のこのプロパティで問題が発生する可能性があります。これにより、望ましくないスクロール動作が発生したり、適切なスクロールバーが表示されなくなったりする可能性があります。

この問題を解決するには、フレックスボックス項目のデフォルトの動作とその最小サイズを理解することが重要です。 Flex アイテムは通常、直接の子の固有サイズに基づいてデフォルトの最小サイズを確立します。この動作は、非表示のオーバーフローでも同じです。

したがって、オーバーフローを持つ要素: [hidden|scroll|auto] がフレックス項目内に存在する場合、その祖先フレックス項目には min-width:0 (水平フレックス コンテナの場合)、または min-height:0 (垂直フレックス コンテナの場合)。これにより、自動最小サイズ設定動作が事実上無効になり、フレックス項目が子の最小コンテンツ サイズを超えて縮小できるようになります。

この調整を .level-0-row2 ルールに実装することで、overflow-y 動作を修正できます。 Firefox で適切なスクロール機能を確保してください。これは Firefox にのみ適用され、Chrome などの他のブラウザではこの最小サイズ設定動作が (当初は) 省略されていたため必要であることに注意してください。

min-height:0 調整を使用して修正されたコード スニペットは次のとおりです。

<code class="css">.level-0-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  min-height: 0;
}</code>

以上がFirefox の「overflow-y」がネストされた Flexbox と矛盾するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。