Why doesn't this CSS flexbox example work on IE 11?
<p>I am using a flexbox layout that is usually presented as a row but when the screen is a certain width it switches to column. This works fine in Chrome, Firefox, Safari and Edge but on IE 11 the flex elements will not center even though I am using <code>justify-content: space-around;</code></p>

<p>I have looked at <a href="https://github.com/philipwalton/flexbugs" rel="nofollow noreferrer">https://github.com/philipwalton/flexbugs</a> and other websites that list flexbox bugs and I can't seem to find the solution.</p>

<p>I have distilled it down to a simple example to demonstrate the problem.</p>

<p>First we have a container that spans the width of the screen with the following properties:</p>

<pre><code>.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  width: 100%;
}
</code></pre>

<p>Then inside it we have four cells with the following properties:</p>

<pre><code>.cell {
  flex-grow: 2;
  text-align: center;
  display: inline-block;
  background-color: green;
  margin: 5px auto;
  min-width: 50px;
  max-width: 20%;
}
</code></pre>

<p>On IE the four cells are aligned left, but on any of the other browsers the cells are center aligned.</p>

<p>Here is an artist's impression of the situation</p>

<p><a href="https://i.stack.imgur.com/msinr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/msinr.png" alt="An artists impression of the situation"></a></p>

<p>I have created a JSFiddle that demonstrates the issue at <a href="https://jsfiddle.net/8w1gf7vx/4/" rel="nofollow noreferrer">https://jsfiddle.net/8w1gf7vx/4/</a></p>