Flex-direction column makes flex items overlap IE11

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