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 don't know why, but this solves the problem. I would like to know why as I cannot find out any information about this issue in any HTML/CSS documents.

If you add the following.

Then all 3 images will shink perfectly. Even if they have hyperlinks. Funny enough if you set just the width: 100%; then the image with the hyperlink stays the exact same size as the image is, and all the others without hyperlinks blow up to the 100% size of the container.

I didn't know flexbox had such rules that needed you to set image max-widths to make items responsive/shrink down if they have a hyperlink attached.

So, tried it in chrome: Only the image now with the anchor shrinks down, the other 2 stay the same size. FireFox all 3 shrink down, but chrome only shrinks the image with the hyperlink wrapped around it.

Tried wrapping hyperlinks around each of the other 2 images and in chrome, they all shrink down fine.

Can someone explain what is going on? How can i set a max-width: and height: auto on a hyperlink?