Flex-direction column 使 flex 项目重叠 IE11

Question

我在 IE11 中使用 flexbox 时遇到问题。使用时 flex-direction: column 弹性项目重叠：

在其他浏览器（chrome、safari）中它看起来像这样：

 .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>

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

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

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

原文由 Chantal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

它是由您的 .flex 类中的 0% 引起的。将其更改为 auto 然后它应该不是问题：

 .flex {
  flex: 1 1 auto;
}

原文由 necilAlbayrak 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 3rdthemagical 发布，翻译遵循 CC BY-SA 3.0 许可协议