Reflow
Content must reflow into a single column at 320 CSS pixels wide (vertical scrolling content) or 256 pixels tall (horizontal scrolling content) without loss of information or functionality. No two-directional scrolling.
What it asks
When the viewport is 320 CSS pixels wide — which corresponds to a 1280px desktop at 400% zoom, or a small mobile device — content must reflow into a single column without requiring horizontal scrolling. The user should never have to scroll both vertically and horizontally to read continuous content. Essential exceptions are allowed: data tables, complex maps, code samples, and presentations where 2D scrolling is fundamental to the content.
How to meet it
- Build the layout mobile-first with flexbox / CSS grid that collapses to a single column at small widths.
- Test at exactly 320px viewport width — or at 400% browser zoom on a 1280px window — and check every page.
- Use
max-width: 100%on images, videos, and embedded media so they shrink with the viewport. - For navigation, collapse desktop horizontal nav into a vertical mobile menu at the right breakpoint.
- For data tables, allow horizontal scroll inside a
overflow-x: autowrapper — the table itself is exempt, but its container shouldn’t push the page sideways. - Don’t use fixed pixel widths on body containers or modals.
Common failures
- Fixed-width hero sections (
width: 1200px) that overflow the viewport at 320px, forcing horizontal scroll. - Modal dialogs sized in vw / px that exceed 320px wide and clip on small screens.
- Code samples in
<pre>blocks with no wrapping or scroll containers, pushing the page wide. - Marketing pages with absolute-positioned decorative elements that don’t account for narrow viewports.
- Sticky elements that overlap content at 400% zoom because they were sized for the full-width viewport.
- Tables that aren’t wrapped in an overflow container, so the entire page scrolls horizontally instead of just the table.
Why it matters
Reflow is the SC that catches most “responsive but not actually responsive” sites — a layout that breaks at 320px CSS pixels equals a layout that breaks at 400% zoom for a low-vision user on desktop. The two are mathematically the same case. Fixing reflow usually means hardening the responsive design that was already most of the way there, which makes it among the highest-leverage WCAG fixes.