IE が Flex コンテナの「min-height」プロパティを無視するのはなぜですか?

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

Internet Explorer 10 および 11 では、フレックス コンテナが最小高さになると予期しない動作を示す可能性があります。高さのプロパティ。フレックス コンテナは定義された最小の高さを遵守する必要がありますが、IE ブラウザはそれを無視します。

この問題に対処するには、フレックス コンテナ自体をフレックス アイテムにするという回避策があります。次のコードを CSS に追加すると、

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

ページ全体が効果的にフレックス コンテナに変換されます。これにより、フレックス コンテナは、意図したレイアウトを維持しながら、IE の min-height プロパティを尊重できるようになります。

例:

2 つの子 div を持つフレックス コンテナを考えてみましょう。コンテナの最小高さは 400px で、子 div は 400px 以下です。 Chrome と Firefox では、レイアウトは予想どおり、1 つの子が上部に、もう 1 つが下部に配置されます。ただし、IE では、コンテナは min-height プロパティを無視して、その内容の高さに合わせて折りたたまれます。

解決策:

この問題を解決するには、ボディをフレックス コンテナーにすることで回避できます。変更されたコードは次のようになります:

<div>

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