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;
}

Comments

[Anthony Gore]

Works vertically too with min-height: 0;

[Miracleio]

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

[Sascha Picard]

saved my day :)

[Massimo Artizzu]

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

[Nikos Kanakis]

Try this :P

* { box-sizing: border-box; }

[Esteban Rocha]

Nice fix man! thanks!

[J. Djimitry Rivière]

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

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

[Michael]

.flexfix