Flex-direction column makes flex items overlap IE11

Instead of flex: 1 1 0%; use flex: 1 1 auto;

.container {
  display: flex; 
  flex-direction: column;
}

.flex {
  flex: 1 1 auto;
}

<div class="container">
  <div class="flex">
    Hello
  </div>
  <div class="flex">
    World
  </div>
</div>

It is caused by the 0% in your .flex class. Change it to auto then it should not be a problem:

.flex {
  flex: 1 1 auto;
}

My particular solution to this issue was that I needed to explicitly set the width on the containing element. Since flex is set to column IE11 will automatically expand the width of the container to accommodate the content of the children (remember that the flex boxes are flipped on their sides in column alignment so when they overflow they grow horizontally instead of vertically).

So my code would look like:

.container {
  display: flex; 
  flex-direction: column;
  width: 100%; // needs explicit width
}

.flex {
  flex: 1 1 auto; // or whatever
}