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

flex-grow isn't rendering correctly in Internet Explorer 11 (IE11)

我尝试了一种新的 html 弹性盒子设计。 Chrome58 Version 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/

主要问题是 IE11 充斥着与 flexbox 相关的错误 (flexbugs)。

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

您的代码中有此规则:flex: 1 100%。它使用 shorthand 属性 分解为:

  • flex-grow: 1
  • flex-shrink: 1 (by default)
  • flex-basis: 100%

因为你已经将 flex-basis 设置为 100%,并且容器设置为 wrap,所以 应该 足以获取要包装的后续项目。

由于 flex-basis: 100% 消耗了该行中的所有 space,因此没有 space 剩余用于其他项目。所以他们必须包装。 Chrome 明白了。

但是,无论出于何种原因,IE11 都会看到后续项目设置为 flex: 1 0% 并表示:

Okay, flex-grow is set to 1, but there's no free space on the line. So there's no space to distribute. And flex-basis is set to 0. This item must be width: 0. No need to wrap anything.

要解决此逻辑,同时保持跨浏览器兼容性,请为必须换行的项目添加一些宽度。尝试 flex-basis: 1px 而不是 flex-basis: 0.

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

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

revised demo