flex-grow 在 Internet Explorer 11 (IE11) 中无法正确呈现

Question

我尝试了一种带有弹性框的新 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 相关的错误 (flexbugs)。

具体问题是flex-grow 不够强大，无法让弹性项目在 IE11 中包装。

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

• flex-grow: 1
• flex-shrink: 1 (by default)
• 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;
}

revised demo