Flexbox nicht Höhe

Question

in IE11 Füllung habe ich diesen 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; 
} 

Aus irgendeinem Grund auf IE11, weder die .sidebar noch die. Der Hauptbereich füllt die gesamte Höhe des Deckblattes.

Dies ist eine Inkonsistenz zwischen den Browsern. Ist das ein Fehler? Fehle ich etwas?

Answer 1

Dies ist ein IE bug bekannt, die leider als Won't Fix von IE-Team geschlossen wurde und wie folgt beschrieben:

In allen anderen Browsern, die Flexbox unterstützen, ein flex-direction:column basierte Flex Behälter werden die Behälter min-height ehren flex-grow zu berechnen Längen. In IE10 & 11-Vorschau scheint es nur mit einem expliziten height Wert zu arbeiten.

AFAIK und trotz dieser Beschreibung gilt der Fehler auch, wenn flex-directionrow ist. Wie in den Kommentaren erwähnt, hat Philip Walton eine Lösung here vorgeschlagen, die das Einstellen der Höhe auf einen festen Wert beinhaltet, aber dies ist keine Option für OP.

Als Abhilfe schlage ich auch eine min-height: 100vh zum main Element zu setzen:

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

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

Pen here.