Flexbox nicht Einfüllhöhe in IE11

Habe ich in diesem Fall:

http://codepen.io/anon/pen/radoPd?editors=110

Dies ist der CSS Code:

.wrapper{
  background-color: red;
  min-height: 100vh;
  display: flex;
}

.sidebar{
  background: orange;
  flex: 0 0 300px;
}
.main{
  background-color: green;
  overflow-y: scroll;
}

Für einige Grund, IE11, weder die .sidebar noch die .der Hauptbereich füllt die ganze Höhe des wrapper.

Dies ist eine Inkonsistenz zwischen den Browsern. Ist das ein bug? Bin ich etwas fehlt?

  • Ich nicht haben Zugang zu den IE11 im moment, so kann ich nur erahnen. Sie haben versucht, explizit Einstellung align-items: stretch auf .wrapper? Reagiert es auf andere Werte, wie center oder flex-end?
  • Ich habe versucht, und das hat nicht funktioniert 🙁 funktioniert Es mit anderen. Ich vermute, dass sich Konflikte irgendwie mit 100vh
  • Ich glaube nicht, dass das wahrscheinlich ist, da min-height funktioniert auf .wrapper, während die align-items Eigenschaft hat einen Einfluss auf die flex-Kinder, nicht auf dem flex-container selbst.
  • So ziemlich ein Duplikat von: stackoverflow.com/questions/25177791/...
  • Naja... so viel zu meinem Sessel Analyse dann 🙂
  • Das problem scheint zu sein, im Vergleich zu hier: wenn Sie den min-height für Ihre wrapper, alle Kinder, die Höhen sind falsch berechnet. Lösung, die bei mir funktioniert: set height: 100%. Leider kann es brechen, brechen, FF & Chrom -, so müssen Sie diese anwenden von CSS, von JS bedingt: isIE11() && $('.wrapper').css('height', '100%');. Aber es scheint, dass Sie ein bisschen anderes problem...

InformationsquelleAutor Enrique Moreno Tent | 2015-02-20
  1. 22

    Dies ist ein bekanntes IE bug, dass leider geschlossen wurde, wie Won't Fix vom IE-Team und wie folgt beschrieben:

    In allen anderen Browsern, die Unterstützung flexbox, ein flex-direction:column basierte flex-container wird zu Ehren der Container min-height zu berechnen flex-grow Längen. Im IE10 & 11-Vorschau, es scheint nur zu arbeiten, mit einer expliziten height Wert.

    AFAIK und trotz dieser Beschreibung den Fehler gilt auch, wenn flex-direction ist row. Wie bereits in den Kommentaren Philip Walton hat vorgeschlagen, eine Lösung hier, das beinhaltet die Festlegung der Höhe auf einen festen Wert, aber dies ist nicht eine option für den OP.

    Als workaround schlage ich vor, um eine min-height: 100vh zu den main element zu:

    .wrapper{
  background-color: red;
  min-height: 100vh;
  display: flex;
}

.sidebar{
  background: orange;
  flex: 0 0 300px;
}
.main{
  background-color: green;
  min-height: 100vh;
}

    Stift hier.

    • Gibt es einen generischen Lösung, wenn der wrapper nicht 100vh? Ich habe eine "Tabelle" aus divs, und wollen einfach jede Spalte eine Zelle in einer Zeile auf die gleiche Höhe. Also ich habe display:flex auf die row div, und das schafft gewünschte Verhalten in Chrome, aber im IE, wenn eine Zelle hat viele Inhalte, und die benachbarte Zelle hat nur wenig Inhalt, wird die Zelle mit wenig Inhalt dehnt sich nicht vertikal auf der gleichen Höhe wie die Zelle mit viel Inhalt.
    • Display: table?
    InformationsquelleAutor Kostas Siabanis
Schreibe einen Kommentar