web-dev-qa-db-ja.com

フレックス方向の列により、フレックスアイテムがIE11にオーバーラップします

IE11でflexbox=を使用すると問題が発生します。flex-direction: column flex-itemsは重複しています：

enter image description here

他のブラウザー（クローム、サファリ）では、次のようになります。

enter image description here

これはcssです。

.container {
  display: flex; 
  flex-direction: column;
}

.flex {
  flex: 1 1 0%;
}

そして、これはhtmlです：

<div class="container">
  <div class="flex">
    Hello
  </div>
  <div class="flex">
    World
  </div>
</div>

私は問題を実証するためにコードペンを作成しました：

http://codepen.io/csteur/pen/XMgpad

IE11でこのレイアウトを重複させないために何が欠けていますか？

htmlcssinternet-explorerflexboxflex-direction
19
Chantal Steur

クラスの％0が原因です

.flex {
  flex: 1 1 auto;
}

それを自動に変更すると、問題ではないはずです

30
necilAlbayrak

の代わりに flex: 1 1 0%; つかいます flex: 1 1 auto;

.container {
  display: flex; 
  flex-direction: column;
}

.flex {
  flex: 1 1 auto;
}
<div class="container">
  <div class="flex">
    Hello
  </div>
  <div class="flex">
    World
  </div>
</div>
15
3rdthemagical

この問題に対する私の特定の解決策は、包含要素の幅を明示的に設定する必要があるということでした。 flexがcolumnに設定されているため、IE11は子のコンテンツに合わせてコンテナの幅を自動的に拡張します（フレックスボックスはcolumnで左右が反転していることに注意してください）それらがオーバーフローすると垂直方向ではなく水平方向に成長します）。

したがって、私のコードは次のようになります。

.container {
  display: flex; 
  flex-direction: column;
  width: 100%; // needs explicit width
}

.flex {
  flex: 1 1 auto; // or whatever
}
1
kmgdev

iE11とflex-direction: column-reverseで同様の問題が発生しましたflex-directionの代わりにcss orderプロパティを使用するように変更しました。

0
Adam