Flexbox non altezza di riempimento in IE11

Question

ho questo caso:

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

Questo è il codice CSS:

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

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

Per qualche ragione, l'IE11, né il .sidebar né il. l'area principale riempirà l'intera altezza del wrapper.

Ciò è incoerenza tra i browser. è un insetto? Mi sto perdendo qualcosa?

Answer 1

Questo è un noto IE bug che purtroppo è stato chiuso come Won't Fix da IE Team e descritto come segue:

In tutti gli altri browser che supportano FlexBox, una base contenitore flessibile flex-direction:column onorerà i contenitori min-height per calcolare flex-grow lunghezze. In IE10 & 11-preview sembra funzionare solo con un valore esplicito height.

AFAIK e nonostante questa descrizione, il bug si applica anche quando flex-direction è row. Come menzionato nei commenti, Philip Walton ha proposto una soluzione here, che include l'impostazione dell'altezza su un valore fisso, ma questa non è un'opzione per OP.

Come soluzione alternativa propongo di fissare un min-height: 100vh all'elemento main troppo:

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