Content must reflow without horizontal scrolling

Rule reflow · Deeper checks · impact serious · Live only (static → incomplete)

↩ Back to the rules index · WCAG cross-reference

Why it matters#

At 320 CSS px wide (a phone, or 400% zoom on desktop), content must not require horizontal scrolling. Fixed-width layouts force users to scroll in two dimensions to read every line. Content that requires a two-dimensional layout for usage or meaning — data tables, images, video, maps, diagrams, toolbars — is exempt per the SC and reported as pass.

How to fix#

Let the layout adapt to a 320px-wide viewport: max-width: 100% instead of fixed pixel widths, flexible grids (flex-wrap, grid with minmax), and media queries that stack columns at narrow widths. Images, video and embeds need max-width: 100% too, and long unbroken strings need overflow-wrap: anywhere. Content that genuinely needs two dimensions — data tables, maps, diagrams, code blocks, toolbars — may scroll on its own inside an overflow-x: auto container and is exempt. Clipping the page with overflow-x: hidden is not a fix: the content is still cut off.

Example#

<div style="width:1200px">Fixed width</div>

<div style="max-width:100%">Fluid width</div>

WCAG success criteria#

1.4.10 Reflow — Level AA#

Content must reflow to a 320 CSS-px viewport without requiring two-dimensional (horizontal) scrolling.

Understanding 1.4.10

Standards#

This rule contributes to the following standards:

WCAG AA EN 301 549

References#

• WCAG — Reflow