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

Question

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

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

Это 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?

Answer 1

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

.flex {
  flex: 1 1 auto;
}

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

Answer 2

Вместо 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>

Answer 3

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

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

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

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

Answer 4

Была похожая проблема с IE11 и flex-direction: column-reverseЯ изменил, чтобы использовать CSS order собственность вместо flex-direction,

Answer 5

Отметим также, что flex: 1; компилируется в flex : 1 1 0%;, поэтому лучше (для пользователей IE), если вы явно напишете flex: 1 1 auto;, как уже упоминалось выше.