在Internet Explorer 11(IE11)中flex-grow不能正确呈现 [英] flex-grow isn't rendering correctly in Internet Explorer 11 (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 to1
, but there's no free space on the line. So there's no space to distribute. Andflex-basis
is set to0
. This item must bewidth: 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;
}
这篇关于在Internet Explorer 11(IE11)中flex-grow不能正确呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!