IE 11 error with maxbox flexbox element

Question

In IE 11, when elements of an element are not positioned properly if they have a maximum width property. However, this example works in Chrome and Firefox.

Js bin

.container { display: flex; justify-content: center; align-items: center; background-color: blue; width: 100%; } .red { background-color: red; flex-grow: 1; display: flex; max-width: 200px; } 

 <div class="container"> <div class="red">non centered box</div> </div> 

Answer 1

This is mistake. But according to IE Feedback, it should have been fixed already.

As a workaround, you can remove flex-grow: 1; if you do not need to use it.

Answer 2

Explicitly set width: calc(100%); so that IE knows the width of the window and correctly centers it.