flexbox columns and IE
css, flexbox, internet-explorer-11
Solution
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.
Problem
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> ```