Firefox のネストされたフレックスボックスで「overflow-y」が機能しないのはなぜですか?

Firefox の overflow-y がネストされた Flexbox で動作しない

CSS3 Flexbox で、overflow-y が適用されると Firefox で問題が発生します。ネストされたフレックス要素。これにより、この CodePen: http://codepen.io/anon/pen/NPYVga.

詳細な説明:

に見られるように、flex 要素が垂直方向にスクロールできなくなります。デフォルトでは、フレックス項目は、子の固有サイズに基づいて最小サイズを確立します。オーバーフローのある要素: [hidden|scroll|auto] がフレックス項目内に含まれている場合、フレックス項目は一貫して子の最小コンテンツ サイズより小さく縮小することを拒否します。

解決策:

この問題を解決するには、祖先フレックス項目 (提供されたコードの .level-0-row2) に min-height:0 を割り当てます。これにより、デフォルトの最小サイズ変更動作が無効になり、必要に応じて flex 項目を縮小できるようになります。

次の修正を加えて修正されたコードペンです:

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;
}

注:

Chrome は現在、このデフォルトの最小サイズ設定動作を強制していませんが、特定の状況では誤って最小サイズを 0 に折りたたむ可能性があります。

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