DEV Community

Martin Himmel
Martin Himmel

Posted on

Quick Tip to Stop Flexbox from Overflowing

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;
}
Enter fullscreen mode Exit fullscreen mode

Discussion (8)

Collapse
miracleio profile image
Miracleio

Lol, I didn't even think this would work but it did
Thanks 🙌🏾

Collapse
jdriviere profile image
J. Djimitry Rivière • Edited on

I always forget about that min-width:0 trick. Thank you for reminding me. :smile:

Collapse
martyhimmel profile image
Martin Himmel Author

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. 😅

Collapse
emgodev profile image
Michael

.flexfix

Collapse
spic profile image
Sascha Picard

saved my day :)

Collapse
estebanrocha profile image
Esteban Rocha

Nice fix man! thanks!

Collapse
maxart2501 profile image
Massimo Artizzu

The sad part is that it's so counterintuitive that it's bound to be forgotten again by everyone's memory.

Collapse
nikosdev profile image
Nikos Kanakis • Edited on

Try this :P

* { box-sizing: border-box; }