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不够强大，不足以让flex项目在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