Quick Tip to Stop Flexbox from Overflowing

・1 min read

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;
}
DISCUSS (6)
 
 

I always forget about that min-width:0 trick. 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. πŸ˜…

 
 

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

 
Classic DEV Post from Dec 4 '18

What software development skills only come with experience?

Some fresh-out-of-school grads are really good. Sometimes newer programmers hav...

Web dev and aspiring game dev who loves to teach and dabbles in various languages.
Join dev.to

Be a better developer. Free forever.