Do not use "flex: 1" or "flex-basis: 0" inside "flex-direction: column" when you need to support IE11

Flexbox is awesome. Most of it even works in IE11, but flex: 1 won't work reliably in Internet Explorer.
This it because implicitly sets flex-basis: 0 which IE fails to support properly.

Example

Consider the following HTML and CSS.

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

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

.child {
  flex: 1;
}

See it in action at Plunker Show archive.org snapshot .

Background

flex: 1 is a shortcut to flex-grow: 1 + flex-shrink: 1 + flex-basis: 0. A base size of zero is okay because the element would grow when needed.
In Internet Explorer, this only works when the flex container uses flex-direction: row. For flex-direction: column, children will overlap as if they would not consume any height.

How to fix

What works, and what you probably want anyway, is flex-basis: auto.

We recommend you use the flex shorthand property with all 3 values:

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

.child {
  flex: 1 1 auto;
}

In the example above, the flex children are allowed to grow and shrink, so the result will be the same. But using auto, it finally works in IE11.