Flex items exceed width of parent in IE

Question

I have a ul > li > a > img parenthesis and am using flexbox to align all list items on to a single row whilst the images are maintaining their aspect ratio's.

What it looks like in Chrome 45, Firefox 40, Safari 8, Opera 28 & Edge

What it looks like in IE 10/11

So my problem is that i'm trying to achieve in IE the same behaviour as i have in Chrome and Firefox.

My SASS/SCSS

ul.images {
  float: left;
  clear: both;
  width: 100%;
  min-height: auto; // Required for Firefox
  padding: 0;
  margin: 0;
  border: 1px solid yellow;

  display: -webkit-flex;
  -webkit-flex-direction: row;

  display: -ms-flexbox;
  -ms-flex-direction: row;

  display: flex;
  flex-direction: row;

  li {
    border: 2px solid green;
    flex: 1 1 auto;
    width: auto;
    min-width: 0; // Required by Firefox
    max-width: 100%;
    max-height: auto;

    img {
      float: left; // Removes phantom margin
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 100px;
    }
  }
}

Here is a CodePen for anyone wanting a more detailed look.

Answer 1

Change the <img> width from auto to 100%

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

It seems that's Chrome who doesn't respect standard