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 来演示这个问题：

我缺少什么才能使此布局在 IE11 中不重叠？

Answer 1

而不是 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>

Answer 2

是你的.flexclass里面的0%造成的。改成auto应该没问题:

.flex {
  flex: 1 1 auto;
}

Answer 3

我对这个问题的特殊解决方案是我需要明确设置包含元素的宽度。由于 flex 设置为 column IE11 将自动扩展容器的宽度以容纳子项的内容（请记住，弹性框在 column 对齐时翻转到它们的两侧，所以当他们溢出他们水平而不是垂直增长）。

所以我的代码看起来像：

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

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

Answer 4

另请注意，flex: 1; 编译为 flex : 1 1 0%;，因此（对于 IE 用户）如果您显式编写 flex: 1 1 auto; 会更好。

Flex-direction column makes flex items overlap IE11