I ran into an issue (yet again π
) where my flex items weren't shrinking below a certain point in one browser but not another (e.g. it worked in Chrome but not Firefox). Turns out, it's a one-line fix: add min-width: 0; to the item.
.flex-container {
display: flex;
}
.flex-item {
flex: 1 1 0;
min-width: 0;
}
Top comments (11)
Thank you so much!!! I've broken my head till found this wonderful tip!
Lol, I didn't even think this would work but it did
Thanks ππΎ
.flexfixI always forget about that
min-width:0trick. Thank you for reminding me. :smile:Haha, that's exactly why I wrote it down. I don't know how many times I've forgotten about it and had to find it again. π
Nice fix man! thanks!
Works vertically too with
min-height: 0;saved my day :)
The sad part is that it's so counterintuitive that it's bound to be forgotten again by everyone's memory.
Try this :P
* { box-sizing: border-box; }
amazing! How does that even work?