DEV Community

Martin Himmel
Martin Himmel

Posted on

37 9

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

Top comments (11)

Collapse
 
yumeedev profile image
Yumee-Dev β€’

Thank you so much!!! I've broken my head till found this wonderful tip!

Collapse
 
miracleio profile image
Miracleio β€’

Lol, I didn't even think this would work but it did
Thanks πŸ™ŒπŸΎ

Collapse
 
emgodev profile image
Michael β€’

.flexfix

Collapse
 
jdriviere profile image
J. Djimitry Rivière ‒ ‒ Edited

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

Collapse
 
martyhimmel profile image
Martin Himmel β€’

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
 
jeroka profile image
Esteban Rocha β€’

Nice fix man! thanks!

Collapse
 
anthonygore profile image
Anthony Gore β€’

Works vertically too with min-height: 0;

Collapse
 
spic profile image
Sascha Picard β€’

saved my day :)

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

Try this :P

* { box-sizing: border-box; }

Collapse
 
hugotox profile image
Hugo Pineda β€’

amazing! How does that even work?

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay