image not behaving as intended unless wrapped in a div

Hey, why does this image not respect the fact it's in a

flex

flex

container and cause the text to overflow unless it's wrapped in a

div

div

? This is something i haven't understood for a while haha, thanks in advance.

https://codepen.io/deerCabin/pen/Baeewbg

CodePenR

image-query

...

MarkBoots•6/29/24, 8:48 AM

min-width: 0 will do the trick i think

MMarkBoots min-width: 0 will do the trick i think

snxxwyyOP•6/29/24, 9:40 AM

Thank you, that seemed to do it, could I ask why that works please and what originally made the problem?

snxxwyyOP•6/29/24, 4:08 PM

could anyone follow up please? i'd appreciate it.

Ssnxxwyy could anyone follow up please? i'd appreciate it.

Hashi•6/29/24, 7:19 PM

My css knowledge is kinda low, but I would guess your answer can be found here: https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size

Stack Overflow

Why don't flex items shrink past content size?

I have 4 flexbox columns and everything works fine, but when I add some text to a column and set it to a big font size, it is making the column wider than it should be due to the flex property.

I ...

snxxwyyOP•6/29/24, 7:24 PM

that did help, thank you. it said "A flex item cannot be smaller than the size of its content along the main axis.", but what i still don't understand is why it doesn't behave incorrectly whilst inside of a div because the div would be a the size of it's content when being a flex item, therefore that shouldn't be able to shrink either then if a flex item cannot be smaller than the size of it's content, it's a bit confusing haha.

Ssnxxwyy that did help, thank you. it said "A flex item cannot be smaller than the size o...

Hashi•6/29/24, 7:36 PM

Again I am in no way css expert, but I went and made img alone and img inside div in your codepen example, and went to "Layout" in dev tools to see flex based values (base size, min size, final size) of each one.
On the "img alone" version I see minimum size to be 1200px while on the div it shows minimum size 0. That kinda explains to me why it behaves like that with and without the div.

snxxwyyOP•6/29/24, 7:37 PM

hm interesting, thanks for taking a look, i apprecitate it.