DEV Community

Quick Tip to Stop Flexbox from Overflowing

Martin Himmel on January 25, 2019

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 Chr...
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?