title: Flexbox IE 11 overflow issue
body: <p>I am facing a flex box issue in IE 11 and have not found any known issue for it. Can anyone suggest solution?</p>
  
  <p>Following example works fine in chrome, firefox and edge, but in IE 11 div with class "second" overflows parent.</p>
  
  <p><a href="http://codepen.io/anon/pen/kXmoYY" rel="nofollow noreferrer">http://codepen.io/anon/pen/kXmoYY</a>. </p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="first"&gt;
    &lt;div class="second"&gt;
      &lt;div class="third"&gt;
          1
      &lt;/div&gt;
      &lt;div class="third"&gt;
          2
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="second"&gt;
      &lt;div class="third"&gt;
          3 text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
      &lt;/div&gt;
      &lt;div class="third"&gt;
          4 text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>less:</p>
  
  <pre><code>.first{
    display: flex;
    flex-direction: row;  
    width: 500px;
  
    .second{     
      flex: 0 1 auto;   
      display: flex;
      flex-direction: column;       
  
      .third {     
        flex: 1 1 auto; 
        padding: 10px;
      }
    }
  }
  </code></pre>
  
  <p>IE 11 screenshot below:</p>
  
  <p><a href="https://i.stack.imgur.com/gUxz4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gUxz4.png" alt="enter image description here"></a></p>
  
  <p>Thanks.</p>