Internet Explorer で Flexbox コンテナの「min-height」が無視されるのはなぜですか?

フレックスボックス: Internet Explorer で無視される最小高さ

Internet Explorer (IE) で標準化されたフレックスボックス用語を使用してフレックス コンテナーを実装しようとする場合バージョン 10 および 11 では、指定された min-height プロパティが無視されるという問題が発生する可能性があります。コンテナーの高さは最小値に制限されていないため、予期しない動作が発生する可能性があります。

問題:

2 つの子 div を持つフレックス コンテナーが予期しない高さの動作を示すIEでは。子 div の高さは 400px 未満ですが、コンテナーの min-height プロパティの 400px は無視されるため、コンテナーは justify-content: space-between プロパティに合わせて拡張されません。これにより、最初の子 div が上に揃えられ、2 番目の子 div が下に揃えられなくなります。

解決策:

IE 10 でこの問題を解決するには、図11では、フレックスコンテナ自体をフレックスアイテムにする必要があります。これは、次の CSS をコードに追加することで実現できます:

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

body 要素をフレックス項目として設定すると、コンテナ div はフレックスボックス プロパティを継承し、min-height プロパティを正しく尊重します。

改訂された例:

フレックス項目の修正を含む更新されたコードは、次の場所にあります。修正されたフィドル:

<div>

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