Firefox image shrink bug fixed with min-width (IE11 too but needs even more)

[cthedot]

While reading http://dfmcphee.com/2016/03/flex-items-and-min-width-0/ I thought this may be a workaround for the bug in Firefox (tested on Win10 only but guess all platforms).

Demo page http://jsbin.com/bijate/edit

Edge and Chrome shrink the image (img needs max-width: 100% which is quite normal for RWD pages) as expected into the flexbox. Without setting min-width to a small size (like 0) Firefox does not and stretches its containing box to fit the complete image. overflow: hidden does work too and actually IE11 does need setting this as min-width alone does not work in IE11.

Or did I miss something and already in list of flexbugs? Thanks.

[jonjohnjohnson]

Running Firefox 45.0.1 seems to not need the min-width. If I just add overflow: hidden to the images containing div, it works perfectly. The issue is that the default flex-direction is column and the max-width being set to 100% leaves the image not knowing it's parent's width because that is suppose to be picked up by it's contents through flexing, so I believe treatments like giving a value to flex-basis (which is akin to min-width) or overflow: hidden create new 'block formatting context' (like the ol' media object hack -> http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/) for the image to actually know what 100% means.

[cthedot]

There are problems with overflow:hidden though. If you position something outside the containing box it would not show up. But as IE11 needs it anyway min-width is not needed and I think even older Firefoxes are content with using overflow.

In the future using min-width would be better as not as intrusive as hiding all overflowing stuff. Guess this will be years though as IE11 will be with us for some time :(

[philipwalton]

I'm not seeing this bug, has it been fixed in the new version of FF? Can you still reproduce it?

[kumarharsh]

I've never seen this issue in any version of Firefox.

[ChaitanyaGadodia]

Hi am facing this issue on Firefox version : 77.0.1 (64-bit). The image shrinks. https://github.com/ChaitanyaGadodia/blog/pull/4 if you want to replicate. Adding min-width is the work around for now.