Firefox と Chrome で Flexbox のレンダリングが異なるのはなぜですか? それを修正するにはどうすればよいですか?

Firefox と Chrome におけるフレックスボックス レンダリングの差異

Web 開発の領域では、クロスブラウザー レンダリングの問題が重大な課題を引き起こす可能性があります。 Flexbox ユーザーが直面するそのような問題の 1 つは、Firefox と以前のバージョンの Chrome で観察された一貫性のない動作です。

Chrome 47 では、「.scroll」 div は期待どおりに機能し、Flexbox を利用して 100% の高さを達成しました。ただし、Firefox では、同じ div がコンテンツの高さに準拠するため、不適切なスクロール動作が発生しました。このため、このレンダリングの不一致に対するブラウザ間での解決策が疑問になりました。

フレックス アイテムのデフォルトの最小サイズをコンテンツと同じに設定するフレックスボックスの仕様の変更が、このレンダリングの違いを引き起こしました。この問題を修正するには、開発者が min-width と min-height を明示的に 0 に設定することで、このデフォルトをオーバーライドできます。

**.content {

background: yellow;
flex: 1;
display: flex;
flex-direction: column;

min-height: 0;           /* NEW */
min-width: 0;            /* NEW */

}
**

しかし、Chrome の最近の更新により、動作が変わりました。 Chrome 48 は Firefox の以前のレンダリングをエミュレートし、両方のブラウザに同じソリューションを適用できます。

CSS 2.1 で定義されている min-width と min-height の初期の auto 値は、新しい auto に置き換えられました。値。最小サイズをコンテンツのサイズに設定します。これにより、フレックスボックス要素のデフォルトのレンダリング動作が変更され、ブラウザ間で不一致が確認されました。

以上がFirefox と Chrome で Flexbox のレンダリングが異なるのはなぜですか? それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。