Flex-direction列使弹性项目与IE11重叠

Question

我在IE11中使用flexbox遇到了一个问题.使用flex-direction: columnflex-items重叠时:

在其他浏览器(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>

我做了一个codepen来演示这个问题:

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

我错过了什么让这个布局在IE11中不重叠？

Answer 1

它是由课堂上的%0引起的

.flex {
  flex: 1 1 auto;
}

将它更改为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>