flex-grow在Internet Explorer 11（IE11）中无法正确呈现

Question

我尝试了使用Flex框的新html设计。Chrome 58版本58.0.3029.110中的设计正确，但IE11中不正确。我没有尝试其他浏览器。

有什么问题

body {
  display: flex;
  flex-flow: row wrap;
}

#left {
  flex: 6 0%;
  display: flex;
  flex-flow: row wrap;
}

#right {
  flex: 1 0%;
  background-color: black;
}

#top {
  flex: 1 100%;
  background-color: red;
}

#nav {
  flex: 1 0%;
  background-color: green;
}

#main {
  flex: 6 0%;
  background-color: blue;
}

#notepad {
  flex: 1 0%;
  background-color: yellow;
}

#chat {
  flex: 6 0%;
  background-color: orange;
}

#break {
  flex: 1 100%;
}

<div id="left">
  <div id="top">test</div>
  <div id="nav">test</div>
  <div id="main">test</div>
  <div id="break"></div>
  <div id="notepad">test</div>
  <div id="chat">test</div>
</div>
<div id="right">test</div>

https://jsfiddle.net/25qu0b2p/

Answer 1

主要问题是IE11充满了与flexbox相关的bug（flexbugs）。

特定的问题是，flex-grow它不足以使弹性项目包装在IE11中。

您的代码中有以下规则：flex: 1 100%。它使用的简写属性可以分解为：

• flex-grow: 1
• flex-shrink: 1（默认情况下）
• flex-basis: 100%

因为你已经设置flex-basis到100%，并且容器被设置为wrap，这应该足以让后续物品包裹。

由于flex-basis: 100%占用了该行中的所有空间，因此没有剩余空间可用于其他项目。因此，他们必须包装。Chrome可以做到这一点。

但是，无论出于何种原因，IE11都会看到后续项设置为flex: 1 0%：

好的，flex-grow设置为1，但是行上没有可用空间。因此，没有分配空间。并flex-basis设置为0。此项目必须为width: 0。无需包装任何东西。

要解决此逻辑，同时保持跨浏览器兼容性，请为必须包装的项目增加一些宽度。尝试flex-basis: 1px代替flex-basis: 0。

#nav {
  flex: 1 1px;
  background-color: green;
}

#notepad {
  flex: 1 1px;
  background-color: yellow;
}

修改后的演示