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，Edge中）
• flex-basis: 0px（在IE11中）

IE11认为这意味着flex项目可以缩小为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。