Flex-grow Isn't Rendering Correctly In Internet Explorer 11 (ie11)

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? https://jsf

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 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: 11px;
  background-color: green;
}

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

revised demo