colonnes flexbox et IE

Tout fonctionne bien dans Chrome et Firefox mais devinez quoi, j'ai un problème dans IE! (IE11)

Dans ma mise en page réactive, je veux que le menu soit horizontal en mode pc et vertical en mode tablette / mobile. Il fait juste cela, mais dans IE les éléments de menu n'ont pas de hauteur. Ils s'effondrent tous à 0 hauteur s'ils sont inspectés avec l'outil de développement. Je ne trouve pas pourquoi.

Quelqu'un aurait une idée?

J'ai fait un codepen pour cela: http://codepen.io/Reblutus/pen/qjacv

Ici est le 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>