web-dev-qa-db-ja.com

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

私が収集できた限り、IE10/IE11を使用している場合は、標準化されたフレックス条件を使用できるはずです。

コンテナーdivと2つの子divがあります。

2つの子divは400px以下なので、justify-content: space-betweenのための十分なスペースが常に必要です。

最初の子を一番上にし、2番目の子を一番下にします。

これはChromeおよびFirefoxで機能しますが、IEでは機能しません。理由はわかりません。

コメントやフィードバックは大歓迎です。

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
  <div style="background-color: red;">
    <h2>Title (variable height)</h2>
    <p>Summary (variable height)</p>
  </div>
  <div style="background-color: orange;">
    <img src="http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
  </div>
</div>

https://jsfiddle.net/akxn68vm/

htmlcssinternet-explorerflexbox
11
Timon

IE 10および11には、適切なレンダリングに関するいくつかの問題がありますflexbox。

ここに1つあります：フレックスコンテナーは、これらのブラウザーのmin-heightプロパティを考慮しません。

簡単な解決策は、フレックスコンテナーもフレックスアイテムにすることです。

これをコードに追加するだけです（他の変更は必要ありません）。

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

改訂フィドル

詳細： https://github.com/philipwalton/flexbugs#flexbug-

27
Michael_B

このバグ によると、フレックスボックスでmin-heightを使用すると、IE11はアイテムを正しくレンダリングしません。

Edgeで問題は解決したようですが、IE10-11は動作しません。

4
Dekel

これはIE10/11のバグです。この情報は https://github.com/philipwalton/flexbugs#flexbug- にあります。

IE10/11でこのバグを修正するには、それ自体がフレックスコンテナーであるフレックスコンテナーの周りにラッパー要素を追加します。この例では、bodyタグに表示フレックスを追加できます。そして、コンテナのdivに幅100％のスタイルを追加します

0
Cao Phan Thanh