Flex image won't shrink with screen size when container is a hyperlink

Question

Can someone let me know if this is an undocumented bug with flexbox, or that I\'m just doing it wrong? I\'ve got 3 images lined up in a row inside a div container. This is as si

Answer 1

I've added my complete working solution. Thanks to many people here giving their various methods. So, this is for anyone else who may be struggling.

First lets set the style's up.

adding min-width: 0; | min-height: 0; seems to be overkill, but with chrome, it works much better apparently than setting them as auto;

Since it's using flexbox we don't add the usual width: 33.33%; even if there are 3 images. In flexbox, this will just space them out way to far apart within a 100% wide div.

Here's the really important part I found out the hard way.

You must use either width: 100% on the images, or max-width: 100%; otherwise, (On Chrome without adding either 100% width or max-width: 100%; it just won't flex/shrink down when you minimize the browser to test its responsiveness.)

So, next to keep each of the 3 images in perfect aspect ratio remember to include each image inside its own div container. Otherwise, they will shrink but will just skew up to each other as they do.

As you can see the first image is even wrapped in a hyperlink, but because it's inside its own div it will shrink and grow completely flush and inline with the other images. This saves using extra markup and saves adding a span tag then making that a flex container to contain the hyperlink. I've tried both ways this is by far the easier method.

I've used inline styles for the flexbox container. (bad habit.)

Remember to close off that last /div it's a real gotcha!

And that's how I've done it. Tested it in many browsers works perfectly. Even on mobile phones and tablets.

If you don't like flexbox? You can do the same thing using regular floats. I've included this same method as above, only this time in a float: version.