Flex-direction column makes flex items overlap IE11

html css internet-explorer flexbox internet-explorer-11

Chantal · Mar 13, 2017 · Viewed 24k times · Source

I'm running into an issue using flexbox in IE11. When using flex-direction: column the flex-items overlap:

In other browsers (chrome, safari) it looks like this:

I've made a codepen to demonstrate the issue:

What am I missing to make this layout not overlap in IE11?

Answer

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