Flex-grow Isn't Rendering Correctly In Internet Explorer 11 (ie11)
Solution 1:
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: 11px;
background-color: green;
}
#notepad {
flex: 11px;
background-color: yellow;
}
Post a Comment for "Flex-grow Isn't Rendering Correctly In Internet Explorer 11 (ie11)"