Flex-direction 列使 flex 项目重叠 IE11

Posted 2023-03-05

【中文标题】Flex-direction 列使 flex 项目重叠 IE11

【英文标题】：Flex-direction column makes flex items overlap 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>

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

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

为了让这个布局在 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;，如上所述。