Flex shrink behaviour on images and content

Thanks for your comments Paul.

I find the images shrink if you include width: 320px; . . . . .or even if you use width: 1px; :confused:

I would not expect it to be necessary to include a value of width when there’s a value of flex-basis.

As we have 9 images, with screen widths giving two images on each Flexbox row the last image will be on a row of its own. Your max-width:100% means this last image becomes a little more than twice the width of the other images. It’s probably preferable to make the max-width the same as the flex-basis.

For a photo gallery an option is to use object-fit: contain to make all images the same aspect ratio at the expense of some cropping.

1 Like