Проблема с отображением flex-direction: column в IE

Суть проблемы – в Internet Explorer если задаем отображение блоков в колонку flex-direction: column, то можем получить такую ситуацию, что контент слипается из-за того, что у потомков получается высота 0.

Пример кода:

<div class="container">
  <div class="child">
    foo
  </div>
  <div class="bar">
    bar
  </div>
</div>

Код CSS:

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

.child {
  flex: 1;
}

такая же проблема при написании flex: 1 1 100%.

Решение проблемы:

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

.child {
  flex: 1 1 auto;
}

Решением проблемы является именно flex-basis: auto.

Потому что flex: 1 является сокращенным вариантом flex-grow: 1+ flex-shrink: 1+ flex-basis: 0. Нулевой базовый размер подходит, потому что элемент будет увеличиваться по мере необходимости.

Но в Internet Explorer это работает только тогда, когда flex-контейнер использует направление flex-direction: row. Для flex-direction: column дочерние элементы будут перекрываться, как если бы они не занимали никакую высоту.