title: Flex items exceed width of parent in IE
body: <p>I have a <code>ul &gt; li &gt; a &gt; img</code> parenthesis and am using <strong>flexbox</strong> to align all list items on to a single row whilst the images are maintaining their aspect ratio's.</p>
  
  <p>What it looks like in <strong>Chrome</strong> <em>45</em>, <strong>Firefox</strong> <em>40</em>, <strong>Safari</strong> <em>8</em>, <strong>Opera</strong> <em>28</em> &amp; <strong>Edge</strong></p>
  
  <p><a href="https://i.stack.imgur.com/ETipe.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ETipe.png" alt="enter image description here"></a></p>
  
  <p>What it looks like in <strong>IE 10/11</strong>
  <a href="https://i.stack.imgur.com/Zd79t.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Zd79t.png" alt="enter image description here"></a></p>
  
  <p>So my problem is that i'm trying to achieve in <em>IE</em> the same behaviour as i have in <em>Chrome and Firefox</em>.</p>
  
  <p>My <strong>SASS/SCSS</strong></p>
  
  <pre class="lang-scss prettyprint-override"><code>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;
      }
    }
  }
  </code></pre>
  
  <p>Here is a <strong><a href="https://codepen.io/mattsince87/pen/BYNNgp" rel="noreferrer">CodePen</a></strong> for anyone wanting a more detailed look.</p>