Multi tool use

flexbox columns and IE

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>


2 Answers
2

I had a very similar issue with IE11.

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

flex

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.

flex

1 0 auto

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

Removing the flex items in .headerContainer nav > a fixes the problem. Tested in IE11 and Chrome.

flex

.headerContainer nav > a

... though that does break the wider layouts - so you will have to put them back in for >800px media query.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.