Flex-direction 列使 flex 项目重叠 IE11答案

【问题标题】：Flex-direction column makes flex items overlap IE11Flex-direction 列使 flex 项目重叠 IE11
【发布时间】：2017-08-03 12:37:02
【问题描述】：

我在 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>

我制作了一个代码笔来演示这个问题：

为了让这个布局在 IE11 中不重叠，我缺少什么？

【问题讨论】：

【解决方案1】：

这是由 .flex 类中的 0% 引起的。将其更改为自动，那么它应该不是问题：

.flex {
  flex: 1 1 auto;
}

【讨论】：

【解决方案2】：

用flex: 1 1 auto;代替flex: 1 1 0%;

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

【讨论】：

【解决方案3】：

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

所以我的代码看起来像：

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

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

【讨论】：

【解决方案4】：

另请注意，flex: 1; 编译为flex : 1 1 0%;，因此（对于 IE 用户）最好明确编写 flex: 1 1 auto;，如上所述。

【讨论】：