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

Posted 2023-03-05

【中文标题】flex-grow 在 Internet Explorer 11 (IE11) 中无法正确呈现

【英文标题】：flex-grow isn't rendering correctly in Internet Explorer 11 (IE11)

【发布时间】：2017-11-01 20:16:33

【问题描述】：

我尝试了一种带有弹性框的新 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/

【参考方案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

【讨论】：

很好的解释，我喜欢你冒充IE的部分