flex-container mit min-height im IE ignoriert

Soweit ich in der Lage gewesen, sich zu versammeln, wenn die Arbeit mit IE10 /IE11 ich sollte in der Lage sein, die Verwendung der standardisierten flex-Bezug.

Ich habe einen div-container und 2 child-divs.

Den 2 child-divs sind nicht größer als 400px, so sollte es immer genug Platz für die justify-content: space-between.

Ich will das erste Kind, den ganzen Weg an der Spitze und das zweite Kind werden den ganzen Weg auf den Boden.

Dies funktioniert in Chrome und Firefox aber nicht im IE, und ich habe keine Ahnung, warum.

Kommentare und feedback sind willkommen.

HTML:

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
  <div style="background-color: red;">
    <h2>Title (variable height)</h2>
    <p>Summary (variable height)</p>
  </div>
  <div style="background-color: orange;">
    <img src="http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
  </div>
</div>

https://jsfiddle.net/akxn68vm/

  • Ich habe eine hintergrund-Farbe für die container. ( gelb ). Sie können auf der jsFiddle, dass der Behälter 400px im IE.
  • wie @GCyrillus sagte min-height im IE mit flex und flex-direction: column nicht richtig funktioniert, verwenden Sie height statt
InformationsquelleAutor Timon | 2016-11-08
  1. 27

    IE 10 & 11 haben eine Reihe von Fragen, mit der Darstellung von flexbox richtig.

    Hier ist einer: Ein flex-container nicht respektiert, der min-height Eigenschaft in diesen Browsern.

    Ist eine einfache Lösung, um Ihre flex-container auch ein flex-Element.

    Fügen Sie einfach diesen code (keine anderen änderungen erforderlich):

    body {
   display: flex;
   flex-direction: column;
}

    überarbeitet fiddle

    Mehr info: https://github.com/philipwalton/flexbugs#flexbug-3

    • vielen Dank für die Lösungen. Auch die min-height-Eigenschaft wird außerhalb der verbuggt flex-container, diese Lösung funktioniert, sobald Sie fügen Sie diese, um das element mit min-height
    InformationsquelleAutor Michael_B
  2. 4

    Laut dieser Fehler IE11 nicht Rendern der Objekte korrekt bei der Verwendung von min-height im flexbox.

    Wie es scheint, das problem wurde gelöst, bei Edge, aber IE10-11 wird nicht funktionieren.

    InformationsquelleAutor Dekel
  3. 0

    Dies ist ein bug im IE10/11. Sie können die Informationen finden, die auf https://github.com/philipwalton/flexbugs#flexbug-3

    Um diesen Fehler zu beheben, die in IE10/11, fügen Sie ein wrapper-element um die flex-container, der selbst ein flex-container. In deinem Beispiel, können Sie hinzufügen, display flex body-tag. Und fügen Sie width 100% style im div-container

    InformationsquelleAutor Cao Phan Thanh
Schreibe einen Kommentar