title: max-height and max-width unexpected behavior in FF and IE11 under flexbox
body: <p>I have a parent with <code>flexbox</code> and an image in that element with <code>max-height</code> and <code>max-width</code>. This displays fine in Chrome (ofc), but on Firefox the image is displayed with <code>height:100%</code> and <code>width:100%</code> while in IE it's displayed with <code>width</code> way over <code>100%</code>.</p>
  
  <p>I've created an example on <a href="http://codepen.io/anon/pen/arzLw" rel="noreferrer">codepen</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id='flex'&gt;
    &lt;img src='https://www.google.se/images/srpr/logo11w.png' /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#flex {
    align-items: center;
    -webkit-align-items: center;    
    -ms-flex-align: center;
    display:block;
    display: -webkit-flex;    
    display: -ms-flexbox;
    display: flex;
    width:200px;
    height:200px;
  }
  
  img {
    max-height: 100%;
    max-width:100%;
  }
  </code></pre>
  
  <p>How do I display the image with <code>max-height</code> and <code>max-width</code> "normally" (<code>display:block;</code> on <code>#flex</code>)? I need <code>display:flex</code> so I can display the image in the center (vertically). If you change <code>display</code> to <code>block</code> on codepen you'll see how the image should look like.</p>
  
  <p>How it looks like in Chrome (correct):</p>
  
  <p><img src="https://i.stack.imgur.com/GHjkf.png" alt="enter image description here"></p>
  
  <p>How it looks like in Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/95N7R.png" alt="enter image description here"></p>
  
  <p>How it looks like in IE11:</p>
  
  <p><img src="https://i.stack.imgur.com/3YLV9.png" alt="enter image description here"></p>