CODEWITHSUNDEEP
cssflexbox
Marwelln
Marwelln

Reputation: 29413

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

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

Upvotes: 7

Views: 2325

Answers (2)

Marwelln
Marwelln

Reputation: 29413

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

Upvotes: 0

aivou
aivou

Reputation: 126

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.

Upvotes: 2

Related Questions