Chrome: Flexbox doesn't scale down images correctly

[afontenot]

This bug was reported about a year ago but still appears to be valid as of Chromium 59. It bit me on a project I'm working on. Chromium bug 625560. The problem concerns images inside a container with display: flex set.

Here's a Codepen that illustrates the problem. Compare Firefox (which works correctly) with Chrome.

I was able to fix the problem in the Codepen, and get Chrome to match Firefox exactly, by adding the following workaround code to the div img CSS:

width: 100%;
height: 100%;
min-width: 0;

Adding this to the img fixed my project as well. I don't understand Chrome's flexbox calculations well enough to know why this works, but I thought it might help someone here.

[philipwalton]

It may be worth adding some info about this to the main README, I'll have to give it some more thought.

In general, I'd recommend not applying flex properties to images (or any replaced elements as the crbug says). Instead, add a container element around the images and apply the flex properties to that. Here's an example: https://codepen.io/anon/pen/BZdYZa?editors=1100

[marconett]

There's a difference between Firefox and Chrome here, even if there's no flex-property on the image itself.

If both width and height (https://codepen.io/anon/pen/dVWjwY), or just one of the two (https://codepen.io/anon/pen/MEmqjd) is set to auto.

Replacing any occurrence of auto with 100% makes Chrome behave like Firefox.

Looks to me like a Chrome Bug.

Tested on macOS, Chrome 61.0.3163.100, Firefox 55.0.3.

[xjamundx]

This bug was doing really cool things to my website for this conference I'm organizing (different random skewing on different images on each load).

I fixed it by adding a container div instead of relying on flex to apply to the images directly, but it was pretty weird (and cool).

[GrimLink]

Setting the flex-shrink to 0 or setting the full flex property to 0 0 auto will also fix this behavior

[tigrr]

I could only fix this in Chrome by setting the appropriate dimension (height for flex-direction: column) to 0. No need for a wrapper div.

[lofcz]

Setting the flex-shrink to 0 or setting the full flex property to 0 0 auto will also fix this behavior

this works well (chrome v80-81)

[ziizium]

Setting the flex-shrink to 0 or setting the full flex property to 0 0 auto will also fix this behavior

In addition to this if you would like the images to fill the available space in the flex container you should make use of flex-grow property with a value of 1 this will result in the following snippet.

flex: 1 0 auto;

Compare the images below, the first image has a flex-grow with a value of 0 resulting in leftover space in the flex container. The second image has a flex-grow with a value of 1.