在Internet Explorer 11（IE11）中flex-grow不能正确呈现 [英] flex-grow isn't rendering correctly in Internet Explorer 11 (IE11)

问题描述

我尝试了一个新的HTML设计与柔性框。 Chrome 58 58.0.3029.110版本中的设计是正确的，但不是在IE11中。我没有尝试其他浏览器。

有什么问题？

  body {display：flex; flex-flow：换行;}＃left {flex：6 0％;显示：flex; flex-flow：换行;}＃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％;        code>< div id =left> < div id =top>测试< / 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>< / code> / div> 

https：// jsfiddle .net / 25qu0b2p /


解决方案

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



特定的问题是 flex-grow 不足以让flex项目在IE11中打包。

你的代码中有这个规则： flex：1 100％。它使用一个速记属性，分解为：

• flex-grow：1


• flex-shrink：1 （默认情况下）
  
• flex-basis：100％ / code>



因为您设置了 flex-basis 到 100％，容器设置为 wrap ，那应该足够获得后续项目包装。

由于 flex-basis：100％消耗行中的所有空间，剩下的空间用于其他物品。所以他们必须包装。 Chrome得到了这个。

然而，无论出于何种原因，IE11都会将后续项设置为 flex：1 0％并说：
$ b

好的， 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; 
 
  

修改后的演示版本

I tried a new html design with flex boxes. The design in Chrome 58 Version 58.0.3029.110 is correct but not in IE11. I did not tried other browsers.

What is the issue?

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/

解决方案

The primary problem is that IE11 is riddled with flexbox-related bugs (flexbugs).

The specific problem is that flex-grow isn't strong enough to get flex items to wrap in IE11.

You have this rule in your code: flex: 1 100%. It uses a shorthand property that breaks down to:

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

Because you've set flex-basis to 100%, and the container is set to wrap, that should be enough to get subsequent items to wrap.

Since flex-basis: 100% consumes all space in the row, there's no space remaining for other items. So they must wrap. Chrome gets this.

However, IE11, for whatever reason, sees subsequent items set to flex: 1 0% and says this:

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.

To workaround this logic, while maintaining cross-browser compatibility, add some width to items that must wrap. Try flex-basis: 1px instead of flex-basis: 0.

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

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

revised demo

这篇关于在Internet Explorer 11（IE11）中flex-grow不能正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！