flexbox columns and IE

Question

Everything works fine in Chrome and Firefox but guess what, I have a problem in IE! (IE11)

In my responsive layout I want to menu to be horizontal in pc mode and vertical in tablet/mobile mode. It does just that, but in IE the menu items have no height. They all collapse to 0 height if inspected with the developer tool. I can't find why.

Anyone would have an idea?

I made a codepen for it: http://codepen.io/Reblutus/pen/qjacv

Here is the code

<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

I had a very similar issue with IE11.

Apparently the issue is to do with IE's implementation of the flex property.

In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.

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

Explicitly setting the flex property to 1 0 auto remedied the issue for my case.

So anywhere you have the flex property set, update the values to match this explicit format.