IE 11 issue with flexbox item with max-width

Question

In IE 11 when an item items don't properly center if they have maximum width property. This example however 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

It is a bug. But according to IE Feedback it was supposed to be fixed already.

As a workaround, you can remove flex-grow: 1; if you don't have to use it.

Answer 2

Explicitly set width: calc(100%); so IE knows the box width and center it properly.