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

Firefox および Chrome の Flexbox でのクロスブラウザー レンダリングの問題

フレックスボックス レイアウト モデルは、要素の配置と配置を処理する直感的かつ効率的な方法を提供します。サイズ感。ただし、ブラウザ間でレンダリング動作に不一致が発生する可能性があります。

問題: .Scroll Div での不適切なスクロール

Chrome (47) の以前のバージョンでは、要素に .スクロール クラスは flex を使用して正しくスクロールされ、高さ 100% を占めました。ただし、Firefox では、同じクラスにより div がコンテンツの高さのみを使用するため、スクロール動作が正しく行われませんでした。

クロスブラウザ ソリューション

この問題を解決するには、フレックス項目のデフォルトの最小サイズをオーバーライドする必要があります。 min-width と min-height を 0 に設定すると、スクロールバーを維持しながら .scroll div をコンテンツに合わせて縮小できます:

.content {
    min-height: 0;
    min-width: 0;
}

Chrome 48 の更新されたレンダリング動作

Chrome 48 では Firefox と同様のレンダリング動作が採用されていることに注意することが重要です。その結果、上記で提供したソリューションは両方のブラウザで一貫して動作するはずです。

追加情報

Chrome 48 の変更は、最新のフレックスボックス仕様に合わせて実装されました。 min-width と min-height のデフォルトは auto です。これにより、フレックス項目の最小サイズがより適切になります。

詳細については、参照された回答にリンクされている仕様とバグレポートを参照してください。

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