Flex 流在 IE11 中不起作用

【问题标题】：Flex flow not working in IE11Flex 流在 IE11 中不起作用
【发布时间】：2023-03-09 14:39:01
【问题描述】：

在 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/cssref/css3_pr_flex-flow.asp

有谁知道怎么回事？

谢谢

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

在 chrome 中：

【问题讨论】：

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

标签： html css flexbox internet-explorer-11

【解决方案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。

【讨论】：