CSS overflow

Why Is My Page Wider Than the Screen?

by

Page wider than screen CSS problems usually happen when one hidden element is wider than the viewport: a 100vw section, fixed-width card, grid column, image, flex row, long text, or absolute element.

Horizontal Overflow Fix

Why is my page wider than the screen?

A page becomes wider than the screen when one element quietly escapes the viewport. The annoying part is that the whole layout may look fine at first, but the browser still allows sideways scrolling because a single section, card, image, grid, button, or line of text is too wide.

CSS Fixes Responsive Fixes
  • Horizontal scroll
  • 100vw bug
  • Fixed width
  • Mobile overflow

What the bug looks like

The page has a sideways scroll bar, content feels zoomed out, or the mobile screen can slide left and right.

Why it happens

One element is wider than its parent or the viewport, even if the rest of the design looks normal.

What usually fixes it

Replace fixed widths with fluid widths, avoid unsafe 100vw, allow grid/flex items to shrink, and wrap long content.

Error 1

width:100vw creates horizontal overflow

A full-width section often looks harmless, but 100vw can be wider than the visible content area. When the page has a vertical scrollbar, 100vw may include that scrollbar width and push the layout sideways.

Broken code

Unsafe viewport width 
.hero {
  width: 100vw;
  padding: 24px;
}

Broken visual result

Leaking past the screen
100vw section

This strip is wider than the visible screen.

overflow →
The section is wider than the real content area, so the page can scroll sideways.

Correct code

Safe full width 
.hero {
  width: 100%;
  max-width: 100%;
  padding: 24px;
}

Fixed visual result

Fits the viewport
Safe section

The element respects the available width.

Use width:100% for normal full-width sections inside the page flow.
Error 2

A fixed-width element is too wide for mobile

A desktop card, modal, table, button, image, or pricing box can keep a fixed width on mobile. Once that width is larger than the screen, the entire page becomes wider too.

Broken code

Fixed desktop width 
.pricing-card {
  width: 420px;
  padding: 24px;
}

Broken visual result

Card is wider than mobile
Pricing card

This card keeps a desktop width and escapes the viewport.

overflow →
The browser expands the scrollable page width to fit the oversized card.

Correct code

Fluid max width 
.pricing-card {
  width: min(100%, 420px);
  padding: 24px;
}

Fixed visual result

Card shrinks safely
Pricing card

The card can be 420px on desktop but shrink on mobile.

width:min(100%, 420px) keeps the design responsive without losing the desktop max width.
Error 3

Grid columns are wider than the screen

CSS Grid can create overflow when columns are fixed or when grid items refuse to shrink. The fix is usually to use responsive columns and allow content to shrink with minmax(0,1fr).

Broken code

Fixed grid columns 
.cards {
  display: grid;
  grid-template-columns: repeat(3, 220px);
  gap: 24px;
}

Broken visual result

Grid escapes viewport
One
Two
Three
overflow →
Three fixed columns cannot fit inside a narrow mobile screen.

Correct code

Responsive grid 
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 24px;
}

.cards > * {
  min-width: 0;
}

Fixed visual result

Grid adapts
One
Two
Three
Four
The grid can collapse into fewer columns instead of forcing the page wider.
Error 4

Long text, URLs, or code do not wrap

Sometimes the layout is fine, but one long string forces overflow. This happens with URLs, code snippets, email addresses, product names, buttons, file paths, and long words.

Broken code

No wrapping 
.content-title {
  white-space: nowrap;
}

Broken visual result

Text forces overflow
SuperLongProductNameWithoutSpacesThatBreaksThePage
overflow →
The text refuses to wrap, so the page becomes wider than the screen.

Correct code

Safe wrapping 
.content-title {
  overflow-wrap: anywhere;
  min-width: 0;
}

Fixed visual result

Text wraps safely
SuperLongProductNameWithoutSpacesThatBreaksThePage
overflow-wrap:anywhere prevents one long string from controlling the whole page width.
Premium pattern

A production-minded anti-overflow pattern

A stronger layout pattern does not hide overflow as the first move. It prevents overflow by using safe wrappers, fluid widths, shrinkable grid/flex children, wrapping text, and media-safe containers.

Premium code

Safe responsive system 
html,
body {
  max-width: 100%;
}

.page-section {
  width: 100%;
  max-width: 100%;
  padding-inline: clamp(16px, 4vw, 32px);
}

.wrapper {
  width: min(100%, 1120px);
  margin-inline: auto;
}

.card,
.media,
.button,
.input {
  max-width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
}

.grid > *,
.flex > * {
  min-width: 0;
}

.long-content {
  overflow-wrap: anywhere;
}

Premium visual result

No hidden page leak
Fluid card
Safe grid
Text wraps
No overflow
Premium overflow prevention means every child is allowed to fit before you need emergency fixes.

Fast practical rule

If your page is wider than the screen, search for the element that sticks out. Open DevTools, inspect wide sections, check fixed widths, replace unsafe 100vw, add min-width:0 to grid or flex children, and make long text wrap.

Debug checklist

  • Temporarily add * { outline: 1px solid red; } in DevTools to spot the leaking element.
  • Check if any section uses width:100vw instead of width:100%.
  • Look for fixed widths on cards, buttons, images, modals, tables, and containers.
  • Make large elements fluid with width:min(100%, value) or max-width:100%.
  • For CSS Grid, avoid fixed mobile columns and use minmax(0,1fr) or responsive columns.
  • For Flexbox, check flex-wrap, gap, flex-basis, and min-width:0.
  • Wrap long URLs, code, and product names with overflow-wrap:anywhere.
  • Inspect absolute or decorative elements positioned outside the viewport.
  • Avoid using overflow-x:hidden as the only fix unless you already found the real cause.
Best first move Find the exact element causing overflow before changing global CSS.
Most common cause A fixed desktop width surviving on mobile.
Most sneaky cause width:100vw on a page that already has a vertical scrollbar.
Better mindset Do not hide the symptom first. Remove the leak from the layout.

Related fixes that can help

If your page is wider than the screen, the root cause is often a known overflow, container, responsive, or text wrapping problem.

Horizontal scroll on mobile? If the page slides sideways mostly on phones, start with the mobile overflow fix. Read this fix
Fix container width problems If wrappers, max-width, padding, or desktop containers are making the page too wide. Read this fix
Why is my text overflowing outside the box? If one long word, URL, line of code, or button label is forcing horizontal overflow. Read this fix
Fix responsive design not working If the whole mobile layout still behaves like a desktop page. Read this fix
Fix CSS Grid Breaking on Mobile If a grid is pushing the page wider than the viewport. Read this fix
Fix Flexbox not centering If the overflow comes from a flex row, alignment, fixed basis, or child sizing issue. Read this fix

Final takeaway

A page wider than the screen is almost always caused by one element that is wider than its parent or the viewport. The whole site feels broken, but the real bug is usually a single fixed width, unsafe 100vw, grid column, flex row, image, absolute element, or long unwrapped text.

Do not start by hiding horizontal overflow everywhere. Find the leaking element first, make it responsive, and then use global overflow rules only as a last protective layer.

Want more fixes like this?

Browse more CSS and responsive debugging guides in the FrontFixer library.

Responsive Fixes All Fixes

Why Is My Text Overflowing Outside the Box in CSS?

by

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.

Browse All Fixes Explore CSS Fixes
  • 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.

Error 1

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

Text escapes
Comment card VeryLongUnbreakableTextThatPushesOutsideTheCardAndBreaksTheLayout
The content keeps going sideways →

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

Text stays inside
Comment card VeryLongUnbreakableTextThatCanNowBreakBeforeItDestroysTheLayout

The browser is now allowed to break the long string before it overflows the card.

Error 2

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.

Error 3

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

Flex child resists
Message LongUnbrokenMessageTextCanStillPressureTheFlexRow

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

Flex child shrinks
Message LongUnbrokenMessageTextCanNowWrapInsideTheAvailableSpace

min-width:0 lets the flex item shrink, and wrapping keeps the text inside.

Error 4

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

Grid gets pressured
LongGridTextCanPressureTheColumn
Normal text

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

Grid respects width
LongGridTextCanNowWrapInsideTheColumn
Normal text

minmax(0,1fr) helps the flexible track stay inside the available layout width.

Error 5

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.
The goal is not to eliminate every horizontal scroll. The goal is to stop one element from making the entire page scroll sideways.

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:anywhere to the text or content wrapper.
  • Remove accidental white-space:nowrap when wrapping should be allowed.
  • If the text is inside Flexbox, add min-width:0 to the flexible child.
  • If the text is inside CSS Grid, use minmax(0,1fr) for flexible tracks.
  • Add min-width:0 to grid children when long content is inside them.
  • Use local overflow-x:auto wrappers for tables and code blocks instead of making the whole page scroll.
  • Do not hide real content with overflow:hidden unless clipping is actually the design goal.
  • Test on a narrow mobile viewport, not only a wide desktop browser.
Best first move Add overflow-wrap:anywhere to the text area that can receive long content.
Most common false fix Making the container wider instead of allowing the content to wrap.
Most overlooked cause The parent flex or grid item may need min-width:0.
Senior-level mindset Text overflow is not just a typography bug. It is often a content, wrapping, and layout-sizing bug at the same time.

Related fixes that can help

If text overflowing outside the box is part of a larger layout problem, these FrontFixer guides are the next places to check.

Horizontal Scroll on Mobile? Fix the Hidden CSS Bug If a long text string is making the whole mobile page scroll sideways. Read this fix
Why Is My Flex Item Shrinking Even With a Fixed Width? If Flexbox sizing is compressing or pressuring a layout in ways that feel confusing. Read this fix
Fix CSS Grid Breaking on Mobile If the overflowing text is inside a grid column or responsive card layout. Read this fix

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.

Browse All Fixes Explore CSS Fixes