The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flexbox shrinks image that has a width set on it

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #268809

    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!


    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.


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

    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.


    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:

    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.


    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.