FF 34.x 以降で FF 33.x フレックスボックスの互換性を維持するにはどうすればよいですか?

FF 34.x での FF 33.x Flexbox の互換性の実現

Firefox 34.x では、Flexbox の動作が変更されました。これにより、以前は機能していた一部のレイアウトが壊れます。

暗黙の最小サイズの問題

FF 33.x と 34.x の Flexbox 実装の間の主な矛盾は、暗黙のサイズに集中しています。フレックス項目の最小サイズ。 FF 34.x では、この機能が再導入され、レイアウトの動作に影響を与えます。

FF 33.x の動作を再作成

FF で FF 33.x の動作を復元するには34.x または 35.x、この CSS を適用しますルール:

* { min-height:0 }

このルールは、新しいデフォルトの動作をオーバーライドして、最小の高さを普遍的にゼロに設定します。

対象となるアプリケーション

一方、上記はルールは簡単な解決策であり、min-height:0 は、それを必要とする特定の要素にのみ適用されるのが理想的です。具体的には、このルールは次の要素に適用する必要があります。

• 列指向のフレックス コンテナの子である
• オーバーフローを許可する必要がある Tall 子孫が含まれる

例

たとえば、提供されたfiddle (http://jsfiddle.net/yoL2otcr/1/)、オーバーフローの問題を修正するために min-height:0 が適用されました。

詳細情報

この特定の Flexbox 仕様変更に関する追加情報と例については、Mozilla バグ トラッカーを参照してください。 https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

以上がFF 34.x 以降で FF 33.x フレックスボックスの互換性を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。