Flex 流程在 IE11 中不起作用

Question

在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 中：

Answer 1

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

计算结果为：

flex-grow: 1
flex-shrink: 1
flex-basis: 0%（在Chrome，FF，边缘）
flex-basis: 0px（在 IE11 中）

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

而不是 flex: 1 使用 flex: auto，它计算为

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

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

More details about flex: auto in the spec。

Flex 流程在 IE11 中不起作用

Flex flow not working in IE11

html

css

flexbox

internet-explorer-11