schematu flexbox nie napełniania wysokość w IE11

Question

Mam tu:

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

Jest to kod CSS:

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

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

z jakiegoś powodu, na IE11, ani .sidebar ani. główny obszar wypełni całą wysokość owijki.

To niespójność między przeglądarkami. Czy to błąd? Czy czegoś brakuje?

Answer 1

Ten znany IE bug który niestety został zamknięty jako Won't Fix przez IE Team i opisać w następujący sposób:

We wszystkich pozostałych przeglądarek, które wspierają flexbox flex-direction:column oparty elastyczny pojemnik uhonoruje pojemniki min-height obliczyć flex-grow długości. W IE10 & 11-preview wydaje się, że działa tylko z wyraźną wartością height.

AFAIK i pomimo tego opisu, błąd dotyczy również, gdy flex-direction jest row. Jak wspomniano w komentarzach Philip Walton zaproponował rozwiązanie here, które obejmuje ustawienie wysokości do stałej wartości, ale nie jest to opcja dla OP.

Jako rozwiązanie alternatywne, że proponuje ustawić min-height: 100vh do elementu main zbyt:

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

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

pióra here.