Flex items overflowing container in IE11

Question

My flex container has a horizontal list of items which all browsers display properly inside their parent except IE11, that seems incapable of keeping them within it, instead they "bleed out" of it, like so:

Below is a simplified Fiddle of my setup which demonstrates the problem in action:

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  width: 200px;
  border: 1px dashed red;
}

li img {
  max-width: 100%;
  height: auto;
}

<ul>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
</ul>

Result on Chrome:

Result on IE11:

Any workaround?

Answer 1

It looks like IE11 requires you to define a size for the flex items (li):

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  width: 200px;
  border: 1px dashed red;
}
 
li {              /* NEW */
  flex: 0 1 100%; /* flex-grow, flex-shrink, flex-basis */
  /* flex: 1 */   /* alternatively, this also works (short for: fg:1, fs:1, fb:0px) */
}

li img {
  max-width: 100%;
  height: auto;
}

<ul>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
  <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li>
</ul>

revised fiddle