title: flexbox columns and IE
body: <p>Everything works fine in Chrome and Firefox but guess what, I have a problem in IE! (IE11)</p>
  
  <p>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. </p>
  
  <p>Anyone would have an idea?</p>
  
  <p>I made a codepen for it:
  <a href="http://codepen.io/Reblutus/pen/qjacv" rel="noreferrer">http://codepen.io/Reblutus/pen/qjacv</a></p>
  
  <p>Here is the code</p>
  
  <pre><code>&lt;style&gt;
  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 &gt; 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 &gt; .headerContainer {
      -webkit-box-flex: 1;
         -moz-box-flex: 1;
      -webkit-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }
    .wrapper &gt; .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;
    }
  }
  &lt;/style&gt;
  &lt;div class="wrapper"&gt;
      &lt;div class="headerContainer"&gt;
          &lt;header&gt;Logo &lt;i class="fa fa-camera-retro"&gt;&lt;/i&gt;          &lt;/header&gt;
      &lt;nav&gt;
              &lt;a href="javascript:;"&gt;Home&lt;/a&gt;
              &lt;a href="javascript:;"&gt;About Us&lt;/a&gt;
              &lt;a href="javascript:;"&gt;Our Properties&lt;/a&gt;
              &lt;a href="javascript:;"&gt;Clients &amp; Partners&lt;/a&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class="mainContainer"&gt;
  
  
  &lt;div class="main main-a"&gt;Main content A&lt;/div&gt;
  &lt;div class="main main-b"&gt;Main content B&lt;/div&gt;   &lt;/div&gt;
  &lt;/div&gt;
  &lt;footer&gt;footer&lt;/footer&gt;
  </code></pre>