it-swarm.com.ru

Колонка Flex-направления делает элементы Flex перекрывающимися IE11

Я столкнулся с проблемой с использованием flexbox в IE11. При использовании flex-direction: column flex-элементы перекрываются:

 enter image description here

В других браузерах (chrome, safari) это выглядит так:

 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?

10
Chantal Steur

Это вызвано% 0 в классе

.flex {
  flex: 1 1 auto;
}

измените его на авто, тогда это не должно быть проблемой

20
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>

13
3rdthemagical

у меня была похожая проблема с IE11 и flex-direction: column-reverse Я перешел на использование свойства css order вместо flex-direction.

1
Adam

Мое конкретное решение этой проблемы состояло в том, что мне нужно было явно установить ширину содержащего элемента. Поскольку для flex установлено значение column, IE11 автоматически расширит ширину контейнера, чтобы вместить содержимое дочерних элементов (помните, что гибкие блоки переворачиваются по бокам в выравнивании column, поэтому при переполнении они растут горизонтально, а не вертикально).

Так что мой код будет выглядеть так:

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

.flex {
  flex: 1 1 auto; // or whatever
}
0
kgrote