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 simple as it gets folks.

Without any hyperlinks, all 3 images shrink down perfectly as they should.

<div style="width: 100%; margin: 0 auto; display: flex; justify-content: center;">
  <a href=""><img src="flash-tooltip.png"></a>
  <img src="html-tooltip.png">
  <img src="portables-tooltip.png">
</div>

Now, only 2 out of the 3 images when viewed on all devices shrink down correctly depending on manually maximizing dragging the browser, of via viewport.

The only image that will not change shape or size is the image with the hyperlink. So, I took the hyperlink off the first image. And decided to test it by placing it on the 2nd, now the 1st image and the 3rd image shrinks fine.

But, the 2nd image stays the exact same size? Tried then adding hyperlinks to all the images and none of them change to match the screen width?

Am I wrong to say flex items if they are images won't flex if they have a hyperlink lol? Surely this cannot be the case right?

Answer 1

The problem has nothing to do with hyperlinks. You could wrap the image in any element (try a span or a div) and it will have the same effect as the a container.

The problem is the hierarchical structure of a flex container.

When you set an element to display: flex (or inline-flex) you establish a flex container.

Only the children of a flex container are flex items. Descendants of a flex container beyond the children are not flex items and don't accept flex properties.

Here are the three flex items:

• <a href=""><img src="flash-tooltip.png"></a>
• <img src="html-tooltip.png">
• <img src="portables-tooltip.png">

The img in the first element is not a flex item. It is wrapped by the a element and is therefore a child of a flex item.

The two img items can shrink because of two default settings on a flex container:

1. flex-wrap: nowrap ~ flex items are forced to remain on a single line
2. flex-shrink: 1 ~ flex items are permitted to shrink to prevent them from overflowing the container

If you switch to flex-wrap: wrap and/or flex-shrink: 0 the img items will no longer shrink.

The a item does not shrink because of another default setting: min-width: auto, which means that flex items cannot be smaller than the size of their content. In this case, the a item cannot shrink below the width of the image.

You can override this setting by adding min-width: 0 to your code.

#container {
  display: flex;
}

span {
  min-width: 0;
  display: flex;
}

img {
  min-width: 0;
}

<div id="container">
  <span><img src="http://i.imgur.com/60PVLis.png"></span>
  <img src="http://i.imgur.com/60PVLis.png">
  <img src="http://i.imgur.com/60PVLis.png">
</div>

More information:

• Why don't flex items shrink past content size?
• Proper use of flex properties when nesting flex containers

Answer 2

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.

<style>

    img {
    max-width: 100%;
    height: auto;
    }
</style>

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?

Answer 3

It's tough to say without seeing your CSS, but you probably are not selecting the images within <a> tags. If you alter your CSS to select images that are inside of <a> tags, it should work fine.

Answer 4

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.

<style>

img {
max-width: 100%;
width: 100%;
min-width: 0;
min-height: 0;
}

</style>

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.)

<div style="border: 2px solid red; margin: 0 auto; display: flex; justify-content: center;">

<div>
<a href=""><img src="flash-tooltip.png"></a>
</div>

<div>
<img src="html-tooltip.png">
</div>

<div>
<img src="portables-tooltip.png">
</div>
</div>

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.