Text overflowing outside the box in CSS usually happens when long words, URLs, code strings, button labels, flex items, or grid columns cannot wrap or shrink safely inside their container.
CSS Overflow Fix
Why Is My Text Overflowing Outside the Box in CSS?
Text overflowing outside the box in CSS is one of those bugs that looks small until it breaks the whole layout. A single long URL, username, token, product title, button label, table value, or code string can push past a card, force horizontal scroll on mobile, stretch a grid column, or make a clean interface look broken. The fix is not simply “make the box wider.” The real fix is understanding how wrapping, minimum width, Flexbox, Grid, and overflow rules work together.
- Long URLs
- Flexbox min-width
- Grid overflow
- Mobile horizontal scroll
What the bug looks like
Text sticks out of a box, the page becomes wider than the screen, a card refuses to shrink, or a button/table column pushes the layout sideways.
Why it happens
The browser cannot find a safe place to break the content, or the layout parent is not allowed to shrink the child to the available width.
What usually fixes it
Add safe wrapping, remove accidental nowrap, use min-width:0 in flex/grid children, and use local scrolling for tables or code blocks.
The core rule: text can only wrap where the browser is allowed to break it
Normal sentences wrap easily because they have spaces. A browser can move words to the next line without changing the text. But long unbroken strings are different. A URL, a package name, a long email address, an API token, or a generated product ID may not have a comfortable break point.
When the browser cannot break the string, the string becomes wider than the box. That one piece of content can then pressure the parent card, the flex row, the grid column, and sometimes the entire viewport. This is why text overflow often appears together with horizontal scroll on mobile, flex item shrinking problems, and CSS Grid breaking on mobile.
The text has no safe wrapping rule
The most common version of this bug is a card or content block that looks fine with normal text, then breaks as soon as a long URL, code string, or unbroken word appears.
Broken code
No wrap protection.card {
max-width: 320px;
padding: 24px;
border: 1px solid #ddd;
}
.card p {
font-size: 16px;
}Broken visual result
The box has a width, but the long text has no safe wrapping instruction.
Correct code
Safe wrapping.card {
max-width: 320px;
padding: 24px;
border: 1px solid #ddd;
}
.card p {
overflow-wrap: anywhere;
}Fixed visual result
The browser is now allowed to break the long string before it overflows the card.
white-space:nowrap is blocking the wrap
white-space:nowrap is useful for short labels, menu items, and compact UI, but it becomes dangerous when the text can be long, translated, dynamic, or user-generated.
Broken code
Forced one line.button {
max-width: 100%;
padding: 12px 18px;
white-space: nowrap;
}Why this breaks
The button is told to stay on one line. If the label becomes longer than the available width, the button may stretch past its parent or overflow on mobile.
Correct code
Allow wrapping.button {
max-width: 100%;
padding: 12px 18px;
white-space: normal;
overflow-wrap: anywhere;
}When to use this
Use this for dynamic buttons, translated labels, long CTAs, admin panels, dashboards, and any component where text length is not fully controlled.
The flex child needs min-width:0
This is the part many developers miss. You can add overflow-wrap:anywhere to the text, but the layout may still overflow if the flex child refuses to shrink. Flex items have an automatic minimum size that can protect their content too aggressively.
Broken code
Flex trap.row {
display: flex;
gap: 16px;
}
.content {
flex: 1;
}
.content p {
overflow-wrap: anywhere;
}Broken visual result
The text rule is there, but the flex child may still need permission to shrink.
Correct code
Shrink allowed.row {
display: flex;
gap: 16px;
}
.content {
flex: 1;
min-width: 0;
}
.content p {
overflow-wrap: anywhere;
}Fixed visual result
min-width:0 lets the flex item shrink, and wrapping keeps the text inside.
Grid columns are using plain 1fr
CSS Grid can also overflow when content refuses to shrink. A common fix is replacing plain 1fr tracks with minmax(0,1fr), then making sure grid children are allowed to shrink.
Broken code
Content pressure.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.card p {
overflow-wrap: anywhere;
}Broken visual result
The grid track may still be influenced by long content.
Correct code
Safer tracks.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.grid > * {
min-width: 0;
}
.card p {
overflow-wrap: anywhere;
}Fixed visual result
minmax(0,1fr) helps the flexible track stay inside the available layout width.
You are trying to force tables or code blocks to wrap when they should scroll locally
Not every overflow should be wrapped. Tables, code blocks, terminal output, and comparison grids often need their own horizontal scroll area. The mistake is letting them make the entire page scroll sideways.
Broken code
Page-level overflow.content table {
width: 100%;
}
pre {
white-space: pre;
}Correct code
Local scroll.table-wrap,
.code-wrap {
max-width: 100%;
overflow-x: auto;
}
pre {
overflow-x: auto;
}| Content type | Best behavior | Why |
|---|---|---|
| Normal paragraphs | overflow-wrap:anywhere |
Text should remain readable inside the card or column. |
| Long URLs | overflow-wrap:anywhere |
URLs can behave like one huge word and break mobile layouts. |
| Tables | overflow-x:auto on wrapper |
Trying to squeeze columns can destroy readability. |
| Code blocks | Local horizontal scroll | Code indentation and line structure should often be preserved. |
Fast practical rule
If text is overflowing outside the box, do not start by hiding it with overflow:hidden. First ask: can this content wrap? Is white-space:nowrap blocking wrapping? Is the parent a flex or grid item that needs min-width:0? Should this content wrap, or should it scroll inside its own local wrapper?
overflow-wrap:anywhere vs word-break:break-all
A lot of developers reach for word-break:break-all when text overflows. It works, but it can be too aggressive. It may break normal words in ugly places even when better wrapping options exist.
For most real interfaces, start with overflow-wrap:anywhere. It gives the browser permission to break long content when needed, without making every normal sentence look chopped up.
Better first choice
Cleaner breaks/* Usually the better first fix */
.text {
overflow-wrap: anywhere;
}
/* More aggressive */
.text {
word-break: break-all;
}Reusable safe content utility
Production pattern.safe-content {
min-width: 0;
overflow-wrap: anywhere;
}
.card,
.comment,
.message,
.product-title,
.table-cell,
.sidebar,
.button {
overflow-wrap: anywhere;
}Where this pattern helps most
Use a safe wrapping pattern anywhere content can be unpredictable: user comments, support tickets, dashboards, admin tables, documentation pages, pricing cards, profile pages, product grids, chat messages, and mobile navigation.
It is especially helpful when your content comes from users, APIs, CMS fields, translations, or generated strings that you cannot fully control.
Debug checklist
- Find the exact text causing the overflow: URL, email, long word, token, slug, file path, button label, or code string.
- Add
overflow-wrap:anywhereto the text or content wrapper. - Remove accidental
white-space:nowrapwhen wrapping should be allowed. - If the text is inside Flexbox, add
min-width:0to the flexible child. - If the text is inside CSS Grid, use
minmax(0,1fr)for flexible tracks. - Add
min-width:0to grid children when long content is inside them. - Use local
overflow-x:autowrappers for tables and code blocks instead of making the whole page scroll. - Do not hide real content with
overflow:hiddenunless clipping is actually the design goal. - Test on a narrow mobile viewport, not only a wide desktop browser.
overflow-wrap:anywhere to the text area that can receive long content.
min-width:0.
Final takeaway
Text overflowing outside the box in CSS usually means the browser is missing one of three things: permission to break long content, permission for the parent layout item to shrink, or a local scroll wrapper for content that should not be forced into a tiny column.
Start with overflow-wrap:anywhere. Then remove accidental white-space:nowrap. If the text is inside Flexbox or Grid, add min-width:0 to the right child and use safer grid tracks like minmax(0,1fr). Once wrapping and layout sizing work together, the text stays inside the box instead of breaking the page.
Want more fixes like this?
Explore the full FrontFixer fixes library and keep debugging with practical guides built for real front-end layout problems.