Столбцы flexbox и IE

Question

Все работает отлично в Chrome и Firefox, но угадайте, что у меня есть проблема в IE! (IE11)

В моем адаптивном макете я хочу, чтобы меню было горизонтальным в режиме ПК и вертикально в планшете/мобильном режиме. Он делает именно это, но в IE пункты меню не имеют высоты. Все они обрушиваются на 0 высоты, если их проверять с помощью инструмента разработчика. Я не могу найти почему.

У кого-нибудь была бы идея?

Я сделал codepen для него: http://codepen.io/Reblutus/pen/qjacv

Вот код

<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

У меня была очень похожая проблема с IE11.

По-видимому, проблема связана с реализацией IE свойства flex.

В IE10 значением по умолчанию для flex является 0 0 auto, а не 0 1 auto, как , определенный в последней спецификации.

Источник: http://caniuse.com/#feat=flexbox

Явных установки flex свойства 1 0 auto устранить проблему для моего случая.

Таким образом, везде, где у вас есть набор свойств flex, обновите значения, соответствующие этому явному формату.

Answer 2

Удаление flex элементов в .headerContainer nav > a исправляет проблему. Протестировано в IE11 и Chrome.

... хотя это нарушает более широкие раскладки - так что вам придется возвращать их для> мультимедийного запроса 800px.