Flexbox Parent width retaining original image width rather than resizing with the image

Questions
1

Hey All, CSS Question here.

Im working on a sidescrolling page, which essentially uses a flex row to loop images from my collection. Each image has a component “Photo-Card” which is a flex column to allow for details about the image to appear below, and the details will vary in height, so the image needs to fill remaining space. The Photo-Container div, is correctly using flex grow to fill the remaining height in the Photo-Card. The trouble is the Photo-Card parent flex is not collapsing to the new width of the image after flex has resized it. It is using the intrinsic size of the image, rather than the rendered size of the image, which leaves a lot of white-space to the right of the image. Photo-Card does respond to the Max-Width of 100vw, as I don’t want the card to ever expand beyond the with of the viewport, but It is not shrinking the width to match the contents within. If you turn off the Max-Width, you’ll notice the Phot-Card grows to 3200px wide which is the original size of the image

How can I get the parent Photo-Card to collapse to the rendered size of the contents within?
I’ve tried using inline-flex on the Photocard, but still no luck.

Here is my page: theEsco | Journal Template

Update: I’ve added a Min-Width of 0px to both the Photo-Container, and the Photo-Card, which seems to work in Safari, but not in chrome. Is there any fix for Chrome?

2

I can’t help you with CSS issue as I am not CSS expert, but for other people to see your progress, you must publish your website first.

3

Thanks Dejan. That’s one problem solved. Site is published and should be viewable now.

4

Hey,
this should help

main .image-size {
object-fit: cover;
flex: 1 0 0px;
max-height: 100%;
max-width: 100%;
height: 100%;
}

main .photo-card {
overflow: hidden;
display: flex;
flex-direction: column;
flex: 0 1 auto;
background: rgb(255,255,255);
padding-left: 16px;
padding-right: 16px;
padding-top: 16px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto;
padding-bottom: 16px;
row-gap: 8px;
max-width: 100vw;
align-items: flex-start;
justify-content: flex-start;
min-width: 0px;
max-width: Auto;
}

basically set-up the height and width of images to 100% and 100% to fill the card. To the image set option to fill or cover which suits your needs.

On the card I would set also flexbox stretch