title: Image height in flexbox not working in IE
body: <p>I have a flex "row" that contains 5 flex "cells" that contains an image which is supposed to be aligned in the middle.</p>
  
  <p>It works perfectly in Chrome and Firefox, but it doesn't in IE. It doesn't get the good ratio. In other terms, <code>height:auto</code> doesn't work in IE when the image is in a flexbox.</p>
  
  <p>I already tried several things like <code>flex:none;</code> for the image or wrap the image in another <code>div</code>. Nothing works.</p>
  
  <p>I want it with the good ratio and fully centered:</p>
  
  <p>Here is a jsFiddle: <a href="https://jsfiddle.net/z8op323f/5/" rel="nofollow">https://jsfiddle.net/z8op323f/5/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid-row {
    width: 300px;
    height: 300px;
    display: flex;
    margin: auto;
  }
  .grid-cell {
    height: 100%;
    width: 25%;
    transition: box-shadow 2s;
    display: flex;
  }
  img {
    width: 60%;
    margin: auto;
    height: auto !important;
    min-height: 1px;
  }
  .long {
    width: 80%;
    height: auto !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid-row"&gt;
    &lt;div class="grid-cell"&gt;
      &lt;img class="long" src="http://placehold.it/350x500"&gt;
    &lt;/div&gt;
    &lt;div class="grid-cell"&gt;
      &lt;img class="long" src="http://placehold.it/350x500"&gt;
    &lt;/div&gt;
    &lt;div class="grid-cell"&gt;
      &lt;img class="long" src="http://placehold.it/350x500"&gt;
    &lt;/div&gt;
    &lt;div class="grid-cell"&gt;
      &lt;img class="long" src="http://placehold.it/350x500"&gt;
    &lt;/div&gt;
    &lt;div class="grid-cell"&gt;
      &lt;img class="long" src="http://placehold.it/350x500"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>