Flex 流在 IE11 中不起作用

Posted 2023-03-05

【中文标题】Flex 流在 IE11 中不起作用

【英文标题】：Flex flow not working in IE11

【发布时间】：2017-01-15 14:52:18

【问题描述】：

在 IE11（边缘模式）中，我有这个代码

.A 
  display: flex;
  flex-flow: row wrap;

.B 
  flex: 1;
  background-color: tomato;

.fix 
  width: 600px;
  background-color: lime;

<div class="A">
  <div class="B">
    foofoofoofoofoofoofoofoofoo
  </div>
  <div class="C">
    <div class="fix">bar</div>
  </div>
</div>

在 chrome 中，当屏幕宽度足够小时它实际上会换行，但在 IE11 Edge 模式下，它不会换行，只是相互叠加。我发现这个页面 https://msdn.microsoft.com/en-us/library/jj127300(v=vs.85).aspx 说应该定义 flex-flow 而 w3schools 说它是为 IE11 定义的。

http://www.w3schools.com/cs-s-ref/css3_pr_flex-flow.asp

有谁知道怎么回事？

谢谢

这是它在 IE11（边缘模式）中的样子：

在 chrome 中：

【问题讨论】：

注意：我重复 IE11（边缘模式） 而不是 Microsoft Edge。

【参考方案1】：

您的.B 元素已应用flex: 1。

这计算为：

flex-grow: 1 flex-shrink: 1 flex-basis: 0%（在 Chrome、FF、Edge 中） flex-basis: 0px（在 IE11 中）

IE11 认为这意味着弹性项目可以缩小到 0，因此是重叠的。

使用flex: auto 代替flex: 1，计算结果为

flex-grow: 1 flex-shrink: 1 flex-basis: auto（内容长度）

https://jsfiddle.net/s26rdfbw/3/

More details about flex: auto in the spec。