title: Flex-grow in IE11 doesn't vertically stretch
body: <p>I thought that IE 11 had full support for flexbox properties but I get a different behavior than on Chrome/Firefox </p>
  
  <p>I simplified it to this simple example: I'm trying to have a 100% height div with a flex child inside that also grows to 100% height. It works in chrome and Firefox but on IE the flex child doesn't grow in height...</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/7qgbkj0o/" rel="noreferrer">https://jsfiddle.net/7qgbkj0o/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {
    background-color: red;
    min-height: 100%;
    height: 100%;
    padding: 0;
    margin:0;
  }
  .p{
    display: flex;
    min-height: 100%;
  }
  
  .c1 {
    flex-grow: 1;
    background-color: gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="p"&gt;
  &lt;div class="c1"&gt;
    asdasd
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>On IE11: <a href="http://imgur.com/a/eNKIJ" rel="noreferrer">http://imgur.com/a/eNKIJ</a></p>
  
  <p>On Chrome: <a href="http://imgur.com/a/xYmJW" rel="noreferrer">http://imgur.com/a/xYmJW</a></p>
  
  <p>I know there are probably alternatives to achieve this without using flexbox but in my real world case I really need to use flexbox here so what's wrong and how can I achieve this on IE11 using flexbox?</p>