colonne flexbox e IE

Question

Tutto funziona correttamente in Chrome e Firefox ma indovina un po ', ho un problema in IE! (IE11)

Nel mio layout reattivo, voglio che il menu sia orizzontale in modalità PC e verticale in modalità tablet/mobile. Fa proprio questo, ma in IE le voci del menu non hanno altezza. Crollano tutti a 0 altezza se controllati con lo strumento di sviluppo. Non riesco a trovare il perché.

Chiunque avrebbe un'idea?

Ho fatto una codepen per esso: http://codepen.io/Reblutus/pen/qjacv

Ecco il codice

<style> 
header { background: cyan;} 
nav { background: bisque;} 
.main-a { background: tomato;} 
.main-b { background: lightblue;} 
footer { background: lightpink;} 

.headerContainer nav { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: column nowrap; 
    flex-direction: column; 
} 

.headerContainer nav > a { 
    padding: 5px 10px; 
    text-align: center; 
    background: #fcd113; 
    border: #6eac2c solid 1px; 
    border-width: 0 0 1px; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
     -ms-flex: 1; 
      flex: 1; 
} 
@media all and (min-width: 600px) { 
    .wrapper { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row nowrap; 
    flex-direction: row; 
    } 
    .wrapper > .headerContainer { 
    -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
    -webkit-flex: 1; 
     -ms-flex: 1; 
      flex: 1; 
    } 
    .wrapper > .mainContainer { 
    -webkit-box-flex: 2; 
     -moz-box-flex: 2; 
    -webkit-flex: 2; 
     -ms-flex: 2; 
      flex: 2; 
    } 
    .mainContainer { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row nowrap; 
    flex-direction: row; 
    } 
    .mainContainer .main-a { 
    -webkit-box-flex: 2; 
     -moz-box-flex: 2; 
    -webkit-flex: 2; 
     -ms-flex: 2; 
      flex: 2; 
    -webkit-box-ordinal-group: 2; 
     -moz-box-ordinal-group: 2; 
    -ms-flex-order: 2; 
    -webkit-order: 2; 
      order: 2; 
    } 
    .mainContainer .main-b { 
    -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
    -webkit-flex: 1; 
     -ms-flex: 1; 
      flex: 1; 
    -webkit-box-ordinal-group: 1; 
     -moz-box-ordinal-group: 1; 
    -ms-flex-order: 1; 
    -webkit-order: 1; 
      order: 1; 
    } 
} 

@media all and (min-width: 800px) { 
    .wrapper { 
    display: block; 
    } 
    .headerContainer { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row nowrap; 
    flex-direction: row; 
    } 
    .headerContainer header { 
    -webkit-box-flex: 1 200px; 
     -moz-box-flex: 1 200px; 
    -webkit-flex: 1 200px; 
     -ms-flex: 1 200px; 
      flex: 1 200px; 
    } 
    .headerContainer nav { 
    -webkit-box-flex: 1 100%; 
     -moz-box-flex: 1 100%; 
    -webkit-flex: 1 100%; 
     -ms-flex: 1 100%; 
      flex: 1 100%; 
    -webkit-flex-flow: row nowrap; 
    flex-direction: row; 
    } 
} 
</style> 
<div class="wrapper"> 
    <div class="headerContainer"> 
     <header>Logo <i class="fa fa-camera-retro"></i>   </header> 
    <nav> 
      <a href="javascript:;">Home</a> 
      <a href="javascript:;">About Us</a> 
      <a href="javascript:;">Our Properties</a> 
      <a href="javascript:;">Clients & Partners</a> 
     </nav> 
    </div> 
    <div class="mainContainer"> 


<div class="main main-a">Main content A</div> 
<div class="main main-b">Main content B</div> </div> 
</div> 
<footer>footer</footer> 

Answer 1

Ho avuto un problema molto simile con IE11.

A quanto pare il problema riguarda l'implementazione di IE della proprietà flex.

In IE10 il valore predefinito per flex è 0 0 auto anziché 0 1 auto come definito nelle specifiche più recenti.

Fonte: http://caniuse.com/#feat=flexbox

impostare in modo esplicito la proprietà flex al 1 0 auto rimedio il problema per il mio caso.

Quindi ovunque sia impostata la proprietà flex, aggiornare i valori in modo che corrispondano a questo formato esplicito.

Answer 2

Rimozione dei flex voci .headerContainer nav > a risolve il problema. Testato su IE11 e Chrome.

... anche se ciò interrompe i layout più ampi, quindi dovrete inserirli nuovamente per> media query 800px.