max-height and max-width unexpected behavior in FF and IE11 under flexbox

Question

I have a parent with flexbox and an image in that element with max-height and max-width. This displays fine in Chrome (ofc), but on Firefox the image is displayed with height:100% and width:100% while in IE it's displayed with width way over 100%.

I've created an example on codepen.

HTML:

<div id='flex'>
  <img src='https://www.google.se/images/srpr/logo11w.png' />
</div>

CSS:

#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%;
}

How do I display the image with max-height and max-width "normally" (display:block; on #flex)? I need display:flex so I can display the image in the center (vertically). If you change display to block on codepen you'll see how the image should look like.

How it looks like in Chrome (correct):

How it looks like in Firefox:

How it looks like in IE11:

Answer 1

If you don't mind adding some markup, enclose the image inside another container which it can earn its parent height and width from instead of the flex container. This should solve the problem in Firefox, I cannot test it in Internet Explorer 11 for you though. You might have to add additional width/height styling to the new container in order for it to work in all browsers.