Flexbox min-width 0 fixes overflow when a flex child refuses to shrink because its default minimum size is based on long text, code, buttons, media, or unbroken content inside it.
Flexbox Overflow Fix
Why does Flexbox need min-width:0?
Flexbox often needs min-width:0 because flex items are not always allowed to shrink as much as you think. A flex child can have flex:1, a responsive parent, and a narrow mobile viewport, but still refuse to get smaller. The reason is usually its default minimum size. Long text, a code snippet, a URL, an image row, a button group, or a no-wrap title can make the item preserve more width than the layout can handle.
That is why this bug feels so unfair. You already used Flexbox. You already gave the child flexible sizing. You may even have overflow:hidden and text-overflow:ellipsis on the text. But the ellipsis never appears, the content pushes the row wider, and the page gets horizontal scroll. The missing piece is often min-width:0 on the flex child that needs permission to shrink.
- Flexbox
- min-width:0
- Text overflow
- Responsive rows
Test the flex child, not only the text
When a flex row overflows, many developers add overflow:hidden to the text element. That can help, but only after the flex item is allowed to shrink. Add min-width:0 to the flex child that contains the text, then apply ellipsis or wrapping rules inside it.
Related: Try this in the FrontFixer Live Inspector.
Open Live Inspector→What the bug looks like
A flex row with an icon, image, label, or button group becomes wider than its parent.
Why it happens
The flex child keeps a content-based minimum width instead of shrinking inside the available space.
What usually fixes it
Add min-width:0 to the flexible child and control the inner text, media, or row behavior.
Why flex items do not always shrink
The confusing part is that Flexbox does shrink items. That is one of the reasons developers use it. But a flex item also has a default minimum size behavior that can be influenced by its content. If the content has a long unbreakable word, a URL, a code line, a no-wrap title, or an inner element with its own minimum width, the flex item may preserve that space.
In practice, flex:1 tells the item how to grow and share space, but it does not always remove the content-based minimum. min-width:0 tells the browser that the item is allowed to become smaller than its content’s preferred width. After that, the inner content can wrap, clip, scroll internally, or show ellipsis depending on your chosen rule.
This is not a random hack. It is a layout permission. You are not forcing the text to disappear. You are telling the flex item that it may respect the parent width first, then let the inner content handle overflow in a controlled way.
flex:1 is not enoughIt does not always cancel a content-based minimum size.min-width:0 gives permissionThe item can finally shrink inside the row.A long title refuses to truncate
A classic media-object layout has an icon on the left and a flexible content area on the right. The content area has a long title, and the developer expects ellipsis to appear. But without min-width:0 on the flex child, the content area may refuse to become smaller.
Broken code
Missing min-width:0.item {
display: flex;
gap: 12px;
}
.item__content {
flex: 1;
}
.item__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Broken visual result
The text has ellipsis rules, but the flex child never shrinks.
Correct code
Flex child can shrink.item {
display: flex;
gap: 12px;
}
.item__content {
flex: 1;
min-width: 0;
}
.item__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Fixed visual result
The flex child shrinks, so the title can truncate inside it.
min-width:0 belongs on the flexible content wrapper, not only on the text line.A code line or URL forces overflow
Code snippets, paths, product SKUs, email addresses, and URLs are often long and unbroken. Inside a flex row, that content can define a large minimum width unless the flex child is allowed to shrink. This is why a single line of text can create page-level overflow.
Broken code
Long content wins.file-row {
display: flex;
gap: 12px;
}
.file-path {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}Broken visual result
The path line is too long for the flex row.
Correct code
Shrink parent first.file-row {
display: flex;
gap: 12px;
}
.file-path {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}Fixed visual result
The path respects the row width and truncates inside it.
A button group makes the flex row wider
Chips, tabs, filters, and button groups can also cause Flexbox overflow. If each button has a minimum width and the row does not wrap, the group may force the parent wider. min-width:0 helps the flexible area shrink, but the buttons may also need wrapping rules.
Broken code
Rigid chips.toolbar {
display: flex;
gap: 10px;
}
.toolbar button {
min-width: 128px;
flex: 0 0 auto;
}Broken visual result
The toolbar is flexible, but the chips are not.
Correct code
Wrap and shrink.toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
min-width: 0;
}
.toolbar button {
flex: 1 1 100px;
min-width: 0;
}Fixed visual result
The buttons can shrink and wrap before the page overflows.
A media object has image plus stubborn copy
Media object layouts are everywhere: avatar plus name, thumbnail plus title, icon plus description, product image plus details. The fixed media on the left is fine. The problem is the content area on the right when it refuses to shrink around long copy.
Broken code
Copy wrapper is stubborn.media {
display: flex;
gap: 12px;
}
.media__thumb {
flex: 0 0 80px;
}
.media__copy {
flex: 1;
}Broken visual result
The thumbnail is fixed, but the copy wrapper keeps too much width.
Correct code
Copy can shrink.media {
display: flex;
gap: 12px;
}
.media__thumb {
flex: 0 0 80px;
}
.media__copy {
flex: 1;
min-width: 0;
}Fixed visual result
The copy gets the remaining space without widening the page.
min-width:0 on the flexible text area.A production-minded flexbox min-width pattern
A reliable flexbox component makes the fixed pieces fixed, the flexible pieces shrinkable, and the inner content responsible for its own overflow behavior. This keeps media rows, list items, toolbars, nav rows, cards, and dashboards stable across screen sizes.
Premium code
Safe flex item system.row {
display: flex;
align-items: center;
gap: 12px;
max-width: 100%;
}
.row__fixed {
flex: 0 0 auto;
}
.row__fluid {
flex: 1 1 auto;
min-width: 0;
}
.row__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.row__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}Premium visual result
The fixed area stays stable and the fluid area can shrink.
flex:1. It also tells the flexible area how to shrink safely.Fast practical rule
If a flex item causes overflow, add min-width:0 to the flex child that contains the long content. Then choose how the inner content should behave: wrap, truncate with ellipsis, scroll internally, or stack. Without the shrink permission, the inner content rules may never get a real chance to work.
Debug checklist
- Find the flex row that becomes wider than its parent.
- Identify the flexible child, usually the text/content wrapper next to a fixed icon or image.
- Add
min-width:0to that flexible child, not only to the text element. - Use
overflow:hidden,text-overflow:ellipsis, andwhite-space:nowraponly when truncation is the desired behavior. - Use wrapping instead of truncation for labels, buttons, and chips that should remain readable.
- Check long URLs, paths, code snippets, product names, and unbroken labels.
- Use
flex-wrap:wrapwhen multiple children cannot fit on one row. - Test the component inside its smallest real parent, not only on a wide page.
min-width:0 to the flex child and watch whether the scrollbar disappears.min-width:0 is not a hack. It is the permission a flexible item needs.When not to use min-width:0 blindly
min-width:0 is powerful, but it should still be used with intent. If the content must remain fully readable, shrinking alone may not be enough. In that case, you may need wrapping, stacking, smaller gaps, or a different mobile layout. The goal is not to hide important content. The goal is to give the flex item permission to fit the parent, then choose the right overflow behavior for the content inside it.
For dashboards, tables, file paths, and code-heavy interfaces, internal scrolling may be a better choice than ellipsis. For navigation chips or filters, wrapping may be better than shrinking. For a title next to an icon, ellipsis may be perfect. The same min-width:0 permission can support all of those decisions.
Final takeaway
Flexbox needs min-width:0 when a flexible child is keeping a content-based minimum width and refusing to shrink inside the row. The parent may be responsive, the item may use flex:1, and the text may have ellipsis rules, but the row can still overflow until the flex child receives shrink permission.
Put min-width:0 on the flexible wrapper, then decide how the content inside should behave. Truncate long titles, wrap button groups, let media objects shrink, and keep the page width stable across mobile and desktop.