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 (9)
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. 😅
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.
Nice fix man! thanks!
Try this :P
* { box-sizing: border-box; }