Why do flex items that wrap overflow the container in IE11?

Question

I cannot understand why my flexbox code doesn't work on IE11. It's okay in Chrome.

It should be centered, but here's what it does in IE11:

HTML

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul> 
</div>

CSS

body {
  padding: 40px;
  margin: 0;
}
div {
  box-content: border-box;
  width: 800px;
  overflow: hidden;
}
ul {
  display: flex;
  flex-flow: row wrap;
  background: blue;
  list-style-type: none;
  padding: 0;
  justify-content: center;
  margin: 0 0 -10px -20px;
}
li {
  flex-grow: 1;
  min-width: 260px;
  max-width: 340px;
  height: 260px;
  background: red;
  margin: 0 0 10px 20px;
}

http://codepen.io/anon/pen/xZLyPz