Flexbox IE 11 overflow issue

Question

I am facing a flex box issue in IE 11 and have not found any known issue for it. Can anyone suggest solution?

Following example works fine in chrome, firefox and edge, but in IE 11 div with class "second" overflows parent.

http://codepen.io/anon/pen/kXmoYY.

html:

<div class="first">
  <div class="second">
    <div class="third">
        1
    </div>
    <div class="third">
        2
    </div>
  </div>
  <div class="second">
    <div class="third">
        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 
    </div>
    <div class="third">
        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 
    </div>
  </div>
</div>

less:

.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;
    }
  }
}

IE 11 screenshot below:

Thanks.