Bildhöhe in Flexbox funktioniert nicht in IE

Question

Ich habe eine Flex "Zeile", die 5 Flex "Zellen" enthält, die ein Bild enthält, das in der Mitte ausgerichtet werden soll.

Es funktioniert perfekt in Chrome und Firefox, aber es ist nicht in IE. Es bekommt nicht das gute Verhältnis. Mit anderen Worten, height:auto funktioniert nicht in IE, wenn das Bild in einer Flexbox ist.

Ich habe bereits verschiedene Dinge wie flex:none; für das Bild ausprobiert oder das Bild in einem anderen div umhüllen. Nichts funktioniert.

Ich will es mit dem guten Verhältnis und voll zentriert: 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>

Answer 1

Versuch für IE Hinzufügen 10

Answer 2

height: auto einfach display: -ms-flexbox;:

hier ein jsFiddle ist bedeutet die Höhe des Inhalts. Es ist ein Standardwert; Sie müssen es nicht angeben.

Wenn Sie height: auto aus Ihrem Code entfernen, ändert sich nichts (in jedem Browser).

Von der Spezifikation: 10.5 Content height: the height property

---

Das Problem scheint zu sein, dass margin: auto in Chrome und FF respektiert wird. Aber es wird (meistens) in IE 11/Edge ignoriert.

Dies ist wahrscheinlich ein Fehler. IE11 insbesondere ist bekannt, dass viele flexbugs haben:

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

---

Eine einfache Cross-Browser-Lösung wäre, zu verwenden, a margin: auto entspricht:

Anstelle dieses Codes auf dem Flex-Artikel:

img { 
    margin: auto; 
} 

verwendet auf den flexiblen Behälter:

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

Weitere Details siehe Kasten # 56 hier: https://stackoverflow.com/a/33856609/3597276

Revised Fiddle

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