Flexbox: shrink-to-fit height of img flex item

[OliverJAsh]

Hey @rachelandrew!

I have a flexbox container with two children: an img and some text in a div. With the default align-items: stretch style applied, I understand that all children will stretch their height to match the tallest flex item.

If I have an img as a flex item, the behaviour is a bit different, however.

As expected, the img will stretch its height of other flex items are taller:

…but it will not shrink its height if all other flex items are shorter:

Example: http://jsbin.com/vefirav/1/edit?html,css,output

What makes img special? Is there a way to force the img to shrink? I would like it to behave just like an empty div would in this case.

I am aware it is possible to achieve this using hacks like absolute positioning, but I've come up against this issue before, and I feel like there should be a better solution.

For context, this is for a component where the content height (which is dynamic) should dictate the height of the image.

[thinsoldier]

This section is for css grid related problems only, I think, not flexbox.

---

The img tag will not shrink any smaller than the actual dimensions of the image file it is showing: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ if the width and height are auto. In your example you have definded a width on the image but not a height which means the height will be auto calcuated based on the aspect ration of the original image file combined with the height value you set.

If you force the image size to something very small like 5px by 5px your flexbox parent height does not change in this example because of the top bottom margins of you paragraphs.

[OliverJAsh]

if the width and height are auto. In your example you have definded a width on the image but not a height which means the height will be auto calcuated based on the aspect ration of the original image file

If that's the case, is there any way to override the auto height so it behaves like other flex items?

[thinsoldier]

I think it's odd to want an image to behave like a div in flexbox mode and not care about the aspect ratio of the original image at all. Try setting the image to be 100% width and 100% height of its parent container. Or possibly set a background image on a div instead of using an tag.

[OliverJAsh]

I think it's odd to want an image to behave like a div in flexbox mode and not care about the aspect ratio of the original image at all

For context, I am using object-fit: cover and object-fit: contain, so the aspect ratio is not used for the element size anyway.

Try setting the image to be 100% width and 100% height of its parent container. Or possibly set a background image on a div instead of using an tag.

This is sort of what I did in this workaround: http://jsbin.com/vohedav/1/edit?html,css,output

However, we shouldn't have to resort to hacks for this behaviour.

[rachelandrew]

I'm not sure what this has to do with CSS Grid Layout? Please keep questions here to grid, there are better places to ask general CSS questions :)

[OliverJAsh]

For anyone who lands here, I posted my question here: https://stackoverflow.com/questions/55630035/css-flexbox-img-flex-item-does-not-shrink-height