Flexbox shrinks image that has a width set on it

[grimski]

First of all, sorry for the lack of a CodePen at the minute but I’m not in front of my computer. I’m hoping this is a common enough problem to get some suggestions though.

I have an image that has a width of 100px set in the CSS. A parent element has display: flex; flex-direction: column; set on it which looks like it’s causing the image to shrink when the browser is resized small.

The CSS looks a bit like this (below). It’s direct parent has padding-left set so the image is positioned into the space – this is to prevent the content alongside it from wrapping.

.mini-cart {
        display: flex;
    flex-direction: column;
}

.mini-cart__item {
        padding: 30px 120px 30px 115px;
        position: relative;

        .u-photo {
            display: block;
            float: left;
            margin-left: -115px;
            width: 100px;
        }
}

Is there a way to prevent this? I’ve tried stuff like flex-shrink, flex-grow but I’ve had no joy yet!

[Paulie_D]

Flexbox and images as flex-children don’t get on too well.

In case of doubt, wrap the image in a div and go from there….but without a demo it’s hard to help.

[grimski]

Yeah sorry I tried a quick CodePen @Paulie_D but I couldn’t see the same issue. Here it is though:

https://codepen.io/moy/pen/dmzwdK

The CSS is the same so maybe you can see something I’m missing. Though making the window narrow doesn’t shrink the image like it does on my site.

[grimski]

Don’t unnecessarily want to bump this but I’ve gotten to the bottom of the problem (I think). Feel free to delete if you don’t want this clogging up the forum but I thought I’d update the post just incase it’s useful to someone else.

It was really, really simple in my situation. Here’s a VERY stripped down and exaggerated version in a CodePen as it was quite subtle: https://codepen.io/moy/pen/mxzroo

If you shrink your browser window horizontally you’ll see the image shrinks even though a width is set and it’s positioned into a space by means of a negative margin that has more than enough room for it.

Basically, although I have max-width: 100% on the element in the CodePen, it’s actually a ‘base’ style on the img tag. Adding max-width: none; to the element seems to fix the problem.

[Mamun]

From your last codepen demonstration.

Change padding: 20px 120px 20px 165px; to padding: 20px 0; in .mini-cart__item class.

Change margin-left: -165px; to margin-right: 15px; in .u-photo class.

This will not shrink the image any more I guess.

[Author]

Posts