Flex-direction列使弹性项重叠IE11

Question

我在IE11中使用flexbox遇到了问题。使用flex-direction: column时，flex-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>

我已经制作了一个代码来证明这个问题：

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

我缺少什么使IE11中的这种布局不重叠？

Answer 1

它是由类

上的％0引起的

.flex {
  flex: 1 1 auto;
}

将其更改为自动然后它应该不是问题

Answer 2

而不是flex: 1 1 0%;使用flex: 1 1 auto;

＆＃13;

＆＃13;

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

.flex {
  flex: 1 1 auto;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

与IE11和flex-direction: column-reverse有类似的问题 我更改为使用css order属性而不是flex-direction。

Answer 4

我对此问题的特殊解决方案是我需要在包含元素上显式设置宽度。由于flex设置为column，因此IE11会自动扩展容器的宽度以容纳子项的内容（请记住，弹性框在其侧面以column的方向翻转，因此当它们溢出，它们沿水平方向而不是垂直方向生长。

所以我的代码如下：

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

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

Answer 5

还请注意，flex: 1;会编译为flex : 1 1 0%;，因此，如果您如上所述明确编写flex: 1 1 auto;，则（对于IE用户而言）会更好。