title: flex property not working in IE
body: <p>I have been unable to determine why flexbox is not working in IE 11.</p>
  
  <p>For testing, I sourced a very simple flexbox layout from CodePen and have pasted the information below.</p>
  
  <p>Chrome works as intended; IE11 fails.</p>
  
  <p>Image of layout-success running on Chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/HnaLO.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/HnaLO.gif" alt="enter image description here"></a></p>
  
  <p>Image of layout-failure on IE11</p>
  
  <p><a href="https://i.stack.imgur.com/77Rjj.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/77Rjj.gif" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #333;
    font-family: helvetica;
    font-weight: bold;
    font-size: 1.7rem;
  }
  
  ul {
    list-style: none;
  }
  
  li {
    background: hotpink;
    height: 200px;
    text-align: center;
    border: 2px solid seashell;
    color: seashell;
    margin: 10px;
    flex: auto;
    min-width: 120px;
    max-width: 180px;
  }
  
  .flex {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="flex"&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
    &lt;li&gt;6&lt;/li&gt;
    &lt;li&gt;7&lt;/li&gt;
    &lt;li&gt;8&lt;/li&gt;
    &lt;li&gt;9&lt;/li&gt;
    &lt;li&gt;10&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/hankthewhale/pen/IdKkB?editors=110" rel="noreferrer">http://codepen.io/hankthewhale/pen/IdKkB?editors=110</a></p>