Product preview card built with flexbox and picture element

What challenges did you encounter, and how did you overcome them?

Getting the image and text part of the card to be equally wide in the desktop layout was a bit counterintuitive.

I set the card’s width to 600px and the image’s to 300px, so I naturally expected the text part to be 300px wide as well — since 600 minus 300 is 300. But instead, the text part stretched to around 450px, leaving just 150px for the image.

This happened because of how Flexbox works. It looked at the natural width of the text part — basically, how wide it would be if the text could stretch freely — which turned out to be around 900px, plus the image’s 300px width. So now, Flexbox had to fit 1200px worth of content into a 600px-wide card.

To do this, it shrank both the image and the text part. That’s because by default, Flexbox allows items to shrink (with flex-shrink: 1). Both the image and the text part shrank proportionally — both halving their natural sizes. The image shrank from 300px to 150px, and the text part from 900px to 450px.

But I didn’t want the image to shrink at all. I wanted the text part to take all the shrinking instead.

The solution was to set flex-shrink: 0 on the <picture> element (not directly on the <img>, since it isn’t a flex child). That prevented the image from shrinking and left the text part to adjust its size:

.productcard {
    max-width: rem(600px);
    flex-direction: row;

    picture {
        flex-shrink: 0; // Prevented image from shrinking
    }

    &__img {
        width: rem(300px);
        height: 100%;
        border-radius: rem(8px) 0 0 rem(8px);
    }
    
    &__content {
        gap: $spacing-400;
        border-radius: 0 rem(8px) rem(8px) 0;
    }
}

HTML structure:

 <article class="productcard"> 
   <picture>
      <source srcset="images/image-product-mobile.jpg" media="(max-width: 767px)">
      <img src="images/image-product-desktop.jpg" alt="Image of product" class="productcard__img">
   </picture>
      
   <div class="productcard__content">
      Text part of the card here
   </div>
 </article>

Alternatively, I could have given the <img> a min-width of 300px, but using flex-shrink on <picture> felt cleaner and more in line with Flexbox’s intended behavior.