title: Flex children not wrapping in Internet Explorer 11
body: <p>I have spent hours trying to fix this issue in IE11 with no luck. I need to use css Flex to group tabs on a page and give a heading to each tab group. </p>
  
  <p>This works without issues in Chrome/Firefox. When there is extra space to the write of tabs, they don't wrap and <strong>they don't take 100% of width</strong>, <strong>unless</strong> they need it. </p>
  
  <p>And they wrap nicely when window size is small:</p>
  
  <p><img src="https://i.stack.imgur.com/2nhLm.png" alt="Chrome screenshot"></p>
  
  <p>But in IE tab texts are not wrapping.</p>
  
  <p><img src="https://i.stack.imgur.com/N6WED.png" alt="IE screenshot"></p>
  
  <p>I would appreciate any help on this.</p>
  
  <p>This is a sample page very similar to what I'm working with. (I should note I did manage to get the tabs to wrap in IE at some point but then the tabs were expanding to fill up 100% of screen which I'm not supposed to have.</p>
  
  <pre><code>&lt;style&gt;
  
  tabSection {
      display: flex;
  }
  
  
  
  h3 {
      padding: 10px; border: 1px solid gray;
  }
  
  .tabGroup {
      display: flex; align-items: flex-end;
  }
  .header {
      flex: 1 0 auto; text-align: center
  }
  .tabGroupParent {
      display: flex; flex-direction: column; border: 3px solid green
  }
  
  .tab {
     flex: 0 1 auto;
  }
  &lt;/style&gt;
  
  &lt;div class="tabSection"&gt;
  
  &lt;div class="tabGroupParent" &gt;
      &lt;span class="header"&gt;header&lt;/span&gt;
      &lt;div class="tabGroup" &gt;
  
          &lt;h3 class="tab"&gt;
              column value stuff stuff 1
          &lt;/h3&gt;
          &lt;h3 class="tab"&gt;
              column value stuff stuff 2
          &lt;/h3&gt;
          &lt;h3 class="tab"&gt;
              column value stuff stuff 3
          &lt;/h3&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tabGroupParent" &gt;
      &lt;span class="header"&gt;header&lt;/span&gt;
      &lt;div class="tabGroup"&gt;
  
          &lt;h3 class="tab"&gt;
              column value stuff stuff 4
          &lt;/h3&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>added codepen link
  <a href="https://codepen.io/Oboluse/pen/mmNaoR" rel="nofollow noreferrer">https://codepen.io/Oboluse/pen/mmNaoR</a></p>
  
  <p><a href="https://i.stack.imgur.com/EGiFG.png" rel="nofollow noreferrer">codepen screenshot</a></p>
  
  <p>Can you please remove the duplicate mark from this question. This is a different problem and does not get solved by adding width:100% to children elements in this case.</p>
  
  <p>Interestingly, if I remove flex-direction: column; from .tabGroupParent child elements start wrapping in IE. But I'm not sure how else to achieve the Header look without using flex-direction:column here.</p>