IE11问题与flexbox导致重叠

Question

我有一个简单的布局，一直给我IE的问题。

描述它的最简单方法就是提供一个可以重现问题的小提琴：

https://jsfiddle.net/yaLq9eqb/4/

＆＃13;

＆＃13;

.item1 {
  display: flex;
  flex-direction: column;
}
.item2 {
  flex: 2;
}

＆＃13;

<div class='item1'>
  <div class='item2'>
    Hey buuuuuuuuuuudy
  </div>
  <div class='item3'>
    whats up
  </div>
</div>
<div>
  Heeeeeey
</div>

＆＃13;

＆＃13;

＆＃13;

这在FF，chrome和safari（三个句子堆叠）中工作正常但在IE11中，第三个句子漂浮在另外两个句子上。有什么想法解决这个问题，同时保持flex属性，让item2占用尽可能多的空间吗？

谢谢！