IE 11 - image resizing bug?

[darby3]

So, I'm resizing an image to fill the width of a flex div. In Chrome, this works like I would expect it to: the image fills the div by width and auto's the height proportionally. In IE 11, though, it appears to size the image correctly, but the surrounding body div sizes up its height (never collapses) as if the full height of the source image were there.

http://codepen.io/darby3/pen/waZRme?editors=110

IE 11 bug? Or am I doing something wrong?

[philipwalton]

I think this is definitely a bug. What's interesting is it only seems to happen with a nested flexbox. If you comment out the flex declaration on the wrapper element, it renders correctly.

Have you found a workaround? I think there's a whole class of IE-related bugs that result from nested flexboxes, but I haven't found enough commonalities or generalized workarounds to be able to properly document them.

[darby3]

I don't think I found a workaround yet (other than, like, using consistently sized images so at least I don't wind up with random bursts of excessive whitespace) but I'll be looking at my use cases again in the next week or so.

[darby3]

Possible workaround: applying a 1px min-height to the body div in the above example collapses the div as I'd expect it to.

http://codepen.io/darby3/pen/VLoExv?editors=110

Kind of a shot in the dark, I stole the min-height idea from something else and tried it on a whim~~, but now I can't remember where I saw it/used it.~~; I have it applied to some form input elements in another project (for some reason that must have made sense at the time but which I didn't document)..

[philipwalton]

Hmmm, it's very strange why 1px works but not 0px. I'm hesitant to suggest a workaround if I can't explain why it works. Any ideas?

[darby3]

"Why" is a bit over my head. I can also say I just used a min-width:1px to make form inputs in Firefox respect a flex-basis percentage. It's all a bit magic pixie dust to me but I'd love to know if someone can explain what's going on here.

[ScottTrenda]

I just finished dealing with this bug. It's terrible and unintuitive. Here's a stripped-down code example that describes and replicates the bug in IE10 and IE11:
http://codepen.io/anon/pen/EPxaBJ
Adding min-height: 1px to the flex item does, in fact, work around the issue. There's some sort of sorcery going on here in IE's guts. My best guess is that the min-height forces IE to recalculate the height of the rendered content after all of the resizing, and that makes it realize that the height is different.
Here's the code example with the workaround: http://codepen.io/anon/pen/RrwPbG

Thanks @darby3 for putting up this workaround. I've been beating myself up over this stupid bug for a few days now, and never would have thought of min-height.

[rtack]

the problem is that while the immediate flexbox parent can be fixed like that. embedding the example into the sticky footer for example will still make the site-content use the effective image height and not the resized calculated image height.

[SteveByerly]

@ScottTrenda thank you so much! fixed my issues.

[DominicLee]

@ScottTrenda Thanks from 2017.

[spencerwalker]

@ScottTrenda Thanks from 2018.

[chicgeek]

This is a bug reported to Microsoft (I can't find the link now!). As it's for IE it's marked as a nofix, but with the above workaround in a comment as a solution.

[oneezy]

@ScottTrenda Thanks from 2019! (wanted to be first)

[YanaPivovarova]

@ScottTrenda Thank you so much. I've spent a lot of hours trying to solve that problem. Thank you!!

[jesterchen]

Another "Thank You!" from me. I was going crazy about this one.

[Jip-Hop]

As @rtack mentioned, the min-height trick doesn't work when the flexbox grid is inside of another flexbox grid, like the Holy Grail Layout. Here's my example philipwalton/solved-by-flexbox#114.

Seems like there isn't a workaround for this case...

[yowlonglee]

Thank you from 2018!

[alien-overlords]

Thanks from 2372.

[Anitorious]

@Jip-Hop
I seem to have discovered a work-around for this, setting the flex container to min-height: 1px and the image element to have a max-height: [VALUE], as well as max-width: 100%, with the max-height value being as large as you may want the image to be before the image stops being responsive. At least, this approach has worked for me.

[lejazz]

Thank you @darby3 and @ScottTrenda. You have made my day!

[ara303]

Thank you, @darby3 and @ScottTrenda! The two of you managed to save me from hours of frustration figuring out why this wasn't working.

It's a shame that this isn't in the Flexbugs page properly. FWIW, this issue is quite high up on the google search for "ie11 flexbox image size bug". It would be good if people were directed to the proper Flexbugs page than this issue, but I understand that it's due to lack of documentation. Anyway, thanks for this. 😄

[Muhammad-Ifrahim]

Hi everyone I go through all of the discussion it's a very good discussion but doing what you guys figure out still remain the height of the card same and the space is created between the image and the text

[joaoantoniorabelo]

I've got to the point that that I've set the max-width for the image inside the flex-item that would not affect height and would not affect the image resizing.

The layout I need to have is:
[--------]
[-] [-] [-]

The small boxes won't grow much until it reach mobile size and it would need some css changes to adjust for a stacked mobile display.

-FlexBox
--Flex-Item
---Img(width: 100%; max-width: 300px;)

[reloxx13]

happened for me today with bootstrap4 and an image inside .modal-body

min-height: 1px; on .modal-body fixed it.

//IE10/11 only
@media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
  /**
   * IE11 Fix image auto height
   * https://github.com/philipwalton/flexbugs/issues/75
   */
  .modal-body {
    min-height: 1px;
  }
}

[imrvelj]

THANKS! 🙏 🙏 🙏

[coreylafferty]

Thanks from 2019. :)

[SkReD]

Thanks a lot, @darby3 and @ScottTrenda!

Possible workaround: applying a 1px min-height to the body div in the above example collapses the div as I'd expect it to.

http://codepen.io/darby3/pen/VLoExv?editors=110

Kind of a shot in the dark, I stole the min-height idea from something else and tried it on a whim~~, but now I can't remember where I saw it/used it.~~; I have it applied to some form input elements in another project (for some reason that must have made sense at the time but which I didn't document)..

This also works with min-height: 0%

[MarcelMorgengry]

@ScottTrenda Thanks, worked perfectly for UIkit 3.0.3

[sassquad]

Another thank you @ScottTrenda from me. This bug nearly drove me crazy today, and I'm sure it's kicked me up the behind a few times before today as well.

🙏🙏🙏

[stas-kh]

I cannot imagine that it is still a workaround in 2019... Thank you very much!

[garrettw]

That's what happens when development stops on an old browser version.

[eliorivero]

Thanks from Sep 2019!

[thomaside]

Thanks from 2020. :)

[jurajk]

this saved me today! thanks many times.

[TomBallagh]

Thanks from March 2020. Saved me a lot of headache.

[Discartyptics]

Thanks from March 2020 as well!

[CameronHCouch]

👀

[psreddy1414]

Thanks from April 2020..!!

[KennanChan]

Thanks from July 2020!

[ryokkkke]

Thanks from Aug 2020!
I added min-height and removed parent flex grid because the workaround won't work in nested flex elements.

[kronthto]

I'll continue the custom 😸:

Thanks from October 2020!

..just ridiculous we are still dealing with this browser

[bertrand-riviere]

how on hell could someone come up with such workaround?! ;)
nevermind, just saved me after several hours of head scratching!!
🙏🙏🙏

[wortwart]

The min-height fix doesn't necessarily have to be applied to the flexboxes. In my case I had a few layers of elements between the and the nested flexboxes. Setting the min-height to the flexboxes did not help but applying it to one of the immediate elements fixed the problem.You can decrease the min-height to .1px or less.

[ricardosaracino]

@ScottTrenda thanks from 2021 because we are still using IE11 🙇🏻‍♂️

[heinrich-ulbricht]

Thanks from September 2021!