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?

Answer 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; }