Flex コンテナの「min-height」が IE で無視されるのはなぜですか?それを修正するにはどうすればよいですか?

IE で無視されるフレックス コンテナの最小高さ

IE ブラウザには、フレックスボックス レンダリングに関する悪名高い歴史があります。これらの問題の中で、最小高さはフレックス コンテナー特有の懸念事項として浮上します。標準の期待にもかかわらず、IE10 と IE11 は min-height プロパティを無視します。

コンテナ div に 2 つの子 div が格納されているシナリオを考えてみましょう。子のサイズは 400px 未満なので、justify-content: space-between 用に十分なスペースが確保されています。目標は、最初の子を上部に、2 番目の子を下部に配置することです。この設定は Chrome と Firefox では問題なく機能しますが、IE では機能しません。

この問題の根本は、特定のフレックスボックスのバグ (Flexbug 3) にあります。これを解決するには、簡単な回避策でフレックス コンテナをフレックス アイテム自体に変換します。これは、次の CSS ルールを追加することで実現できます:

body {
   display: flex;
   flex-direction: column;
}

この CSS を組み込むと、それ以上の変更を加えることなく問題が解決します。

さらに詳しく調べるには、公式 Flexbug リポジトリを参照してください: https: //github.com/philipwalton/flexbugs#flexbug-3.このリポジトリは、フレックスボックスのさまざまなバグに関する洞察を提供し、効果的な回避策を提供します。

以上がFlex コンテナの「min-height」が IE で無視されるのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。