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):

enter image description here

How it looks like in Firefox:

enter image description here

How it looks like in IE11:

enter image description here

try using `%` instead of `px` in width and height of `#flex` — muneebShabbir, Nov 07 '13 at 12:18

score 2 · Answer 1 · answered Nov 07 '13 at 12:18

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.

score 0 · Accepted Answer · answered Nov 07 '13 at 19:49

I could unfortunately not find any solution to this so I had to use display:table/display:table-cell and vertical-align:middle instead.

Working copy available at Codepen.

Markup

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

CSS

#flex {
  display:table;
  background:purple;
  width:200px;
  height:200px;
}

#flex > div { 
  display:table-cell;
  height: inherit; 
  vertical-align: middle;
  width:inherit; 
}
#flex > div > div {
  width:inherit;
}

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

there is a solution, nowadays: https://stackoverflow.com/questions/41489798/keep-image-ratio-using-max-width-and-max-height-in-ie-11/43227016#43227016 — benzkji, Dec 22 '17 at 12:18

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

2 Answers2