Flexbox image height not working in IE

Question

I have a flexible “row” containing 5 flexible “cells” that contain an image that needs to be aligned in the middle.

It works fine in Chrome and Firefox, but it is not in IE. He does not get a good attitude. In other words, it height:autodoes not work in IE when the image is in flexbox.

I have already tried several things, for example flex:none;for an image, or wrapped the image in another div. Nothing works.

I want it with a good ratio and fully centered:

Here is jsFiddle: https://jsfiddle.net/z8op323f/5/

.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;
}

<div class="grid-row">
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
</div>

Run code

Answer 1

height: auto . ; .

height: auto , ( ).

: 10.5 : height

---

, margin: auto Chrome FF. ( ) IE 11/Edge.

, , . , IE11, , flexbugs:

• https://github.com/philipwalton/flexbugs
• http://caniuse.com/#search=flexbox (. " " )

---

- margin: auto:

flex:

img {
    margin: auto;
}

flex:

.grid-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

. № 56 : fooobar.com/questions/3729/...

.grid-row {
  width: 300px;
  height: 300px;
  display: flex;
  margin: auto;
}
.grid-cell {
  height: 100%;
  width: 25%;
  transition: box-shadow 2s;
  display: flex;
  justify-content: center;    /* NEW */
  align-items: center;        /* NEW */
}
img {
  width: 60%;
  /* margin: auto; */
  /* height: auto !important; */
  min-height: 1px;
}
.long {
  width: 80%;
  /* height: auto !important; */
}

<div class="grid-row">
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
  <div class="grid-cell">
    <img class="long" src="http://placehold.it/350x500">
  </div>
</div>

Answer 2

display: -ms-flexbox; IE 10