Quick Tip to Stop Flexbox from Overflowing

martyhimmel

Martin Himmel

Posted on January 25, 2019

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
💖 💪 🙅 🚩
martyhimmel
Martin Himmel

Posted on January 25, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related