Prevent horizontal scrolling
Web pages must not require horizontal scrolling at standard viewport widths. Horizontal overflow breaks responsive layouts and makes content inaccessible to low-vision users who zoom in.
- Pages must not produce horizontal scrollbars at viewport widths of 320px and above — WCAG 2.1 SC 1.4.10 (Reflow)
- WCAG 2.1 SC 1.4.10 requires content to reflow at 400% zoom (equivalent to 320px CSS width) without horizontal scroll
- Common causes: fixed-width elements wider than the viewport, `width: 100vw` not accounting for scrollbar width, long unbreakable strings, `white-space: nowrap`
- Use `max-width: 100%` on images and media, `overflow-wrap: break-word` on text containers, and fluid layout units
Rule Details
Pages should not require horizontal scrolling at any standard viewport width. Horizontal overflow is especially harmful for users who rely on browser zoom or screen magnification software.
Code Examples
Fixed-width containers
/* ❌ Problem: fixed width causes overflow on small screens */
.container {
width: 1200px;
}
/* ✅ Fix: max-width with full fluid width */
.container {
max-width: 1200px;
width: 100%;
}Images and media without max-width
/* ❌ Problem: intrinsic image width overflows container */
img {
/* no width constraints */
}
/* ✅ Fix: images constrained to their container */
img, video, iframe, embed, object {
max-width: 100%;
height: auto;
}Long unbreakable strings
/* ❌ Problem: long URLs or code strings overflow text containers */
.content {
/* no word-break rules */
}
/* ✅ Fix: allow breaking of long words */
.content {
overflow-wrap: break-word;
word-break: break-word; /* fallback for older browsers */
}width: 100vw causes overflow
/* ❌ Problem: 100vw includes scrollbar width, causing horizontal overflow */
.hero {
width: 100vw;
}
/* ✅ Fix: use 100% relative to the parent */
.hero {
width: 100%;
}Data tables
<!-- ✅ Correct: table wrapped in scrollable container -->
<div style="overflow-x: auto;" role="region" aria-label="Sales data">
<table>
<!-- wide table content -->
</table>
</div>Why It Matters
- Screen Magnification: ZoomText, Magnifier, and browser zoom at 200–400% effectively shrinks the viewport to 320–640px — fixed-width layouts break completely.
- Mobile Devices: 320px CSS width is the iPhone SE viewport — a real device, not just an edge case.
- WCAG 2.1 AA Compliance: SC 1.4.10 (Reflow) is a Level AA requirement — failures block certification.
- Cognitive Load: Horizontal scrolling disrupts reading flow and causes disorientation for all users.
Verification
- Inspect the rendered UI at the breakpoints and interaction states affected by the rule.
- Confirm the computed styles match the intended fix in DevTools.
- Test at least one mobile and one desktop viewport before shipping.
- If the rule affects motion, contrast, or layout stability, verify those user-facing outcomes directly.
Use with AI
Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.
Check
Verify implementation
Test the page at a 320px CSS viewport width (equivalent to 400% browser zoom on a 1280px screen). Look for horizontal scrollbars or content overflowing outside the viewport. Specifically check: (1) elements with fixed `width` values in px that exceed the viewport; (2) `min-width` values that prevent shrinking; (3) images or media without `max-width: 100%`; (4) `white-space: nowrap` on text that causes overflow; (5) `width: 100vw` on elements (scrollbar width causes overflow); (6) long URLs or unbreakable strings in content areas.
Fix
Auto-fix issues
(1) Replace fixed `width: Npx` on layout containers with `max-width: Npx` plus `width: 100%`. (2) Add `max-width: 100%` and `height: auto` to all images and media. (3) Apply `overflow-wrap: break-word` (with fallback `word-wrap: break-word`) to text containers that may contain long strings. (4) Replace `width: 100vw` with `width: 100%` on full-width elements (avoid scrollbar overflow). (5) Use CSS Grid or Flexbox with `flex-wrap: wrap` for multi-column layouts. (6) For data tables, wrap in a scrollable container: `overflow-x: auto` on the table wrapper, not the page body.
Explain
Learn more
WCAG 2.1 SC 1.4.10 (Reflow, Level AA) requires that content does not require two-dimensional scrolling when displayed at a width of 320 CSS pixels or a height of 256 CSS pixels. This corresponds to 400% zoom on a 1280×1024 display. Exceptions are made for content that requires two-dimensional layout for usage (e.g., data tables, map interfaces, video). For all other content — body text, navigation, forms, images — horizontal scrolling is a barrier for screen magnification users who cannot see the full page width.
Review
Code review
Review stylesheets, component styles, and responsive states related to Prevent horizontal scrolling. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.