Quick Tip to Stop Flexbox from Overflowing

twitter logo github logo ・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;
}
twitter logo DISCUSS (6)
markdown guide
 
 

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 May 21

Ten Cognitive Biases to Look Out For as a Developer

Cognitive biases can be viewed as bugs in our thinking. In this blog post we want to take a look at ten cognitive biases to look out for as a developer.

Martin Himmel profile image
Web dev and aspiring game dev who loves to teach and dabbles in various languages.

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❀️