Flex-direction column makes flex items overlap IE11

Question

I'm running into an issue using flexbox in IE11. When using flex-direction: column the flex-items overlap:

In other browsers (chrome, safari) it looks like this:

.container {
  display: flex; 
  flex-direction: column;
}
.flex {
  flex: 1 1 0%;
}

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

I've made a codepen to demonstrate the issue:

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

What am I missing to make this layout not overlap in IE11?

Solution 1

It is caused by the 0% in your .flex class. Change it to auto then it should not be a problem:

.flex {
  flex: 1 1 auto;
}

Solution 2

Instead of flex: 1 1 0%; use 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>

Solution 3

My particular solution to this issue was that I needed to explicitly set the width on the containing element. Since flex is set to column IE11 will automatically expand the width of the container to accommodate the content of the children (remember that the flex boxes are flipped on their sides in column alignment so when they overflow they grow horizontally instead of vertically).

So my code would look like:

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

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