IE11 issue with flexbox causing overlap

Question

I have a simple layout that keeps giving me issues on IE.

The easiest way to describe it is just to provide a js fiddle that reproduces the issue:

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

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

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

This works fine in FF, chrome, and safari (The three sentences are stacked) but in IE11, the third sentence is floating over the other two. Any idea of a way around this while maintaining the flex properties that allow item2 to take up as much room as it needs?

Thanks!