WCAG 1.4.10 — Reflow

What this requires

Content must reflow into a single column at a viewport width of 320 CSS pixels (vertical scrolling content) or 256 CSS pixels (horizontal scrolling content) without loss of information or functionality and without requiring scrolling in two dimensions. The exception is content that genuinely needs two dimensions to convey information — data tables, maps, complex diagrams, video — which may scroll horizontally for that block alone.

How AI coding tools fail this

When asked to build a marketing page that "looks like the Figma at 1440px", AI tools deliver a layout that visually approximates the design and breaks at narrow viewports. The most common failure shapes:

Containers with fixed widths (w-[1200px]) that overflow the viewport and trigger horizontal scrolling.
Tables, cards, or button rows that don't wrap, forcing a horizontal scrollbar across the whole page.
Modal dialogs with absolute heights and widths that get cut off below the viewport edge.
"Cards in a row" layouts that don't collapse to a column at narrower breakpoints.

The second pattern: media that overflows without a wrapper — a wide data visualisation embedded as an SVG with no max-width constraint, or an iframe set to width="800".

Failing examples

A container with a fixed width that scrolls horizontally:

<div className="w-[1200px] mx-auto">
  {content}
</div>

A card grid that doesn't collapse:

<div className="grid grid-cols-4 gap-4">
  {cards.map((c) => <Card key={c.id} {...c} />)}
</div>

Passing examples

Use responsive utilities so the layout reflows:

<div className="mx-auto max-w-7xl px-4">
  {content}
</div>

A card grid that collapses cleanly:

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
  {cards.map((c) => <Card key={c.id} {...c} />)}
</div>

A genuinely 2D piece of content (a data table) scrolling horizontally within its own region, not the whole page:

<div className="overflow-x-auto" tabIndex={0} role="region" aria-label="Quarterly revenue">
  <table>...</table>
</div>

Edge cases

320 CSS pixels is roughly a 400% zoom on a 1280-pixel-wide laptop, or a portrait iPhone SE. It is the minimum width the criterion requires layouts to reflow to.
Data tables, maps, diagrams, video, and toolbars with critical inline controls are explicitly exempt — they may scroll horizontally within their own region.
Scrollable side panels count as horizontal scrolling at the page level if the whole page doesn't fit; they're fine if they're contained.
Fixed-position elements (a sticky header, a chat widget) must not cover so much of the viewport that content becomes unreachable at 320 CSS pixels.
1.4.10 vs 1.4.4: 1.4.4 is about text size; 1.4.10 is about viewport width. Most failures of 1.4.10 are CSS sizing issues, not font issues.

How Jeikin handles this

Reflow needs runtime rendering. Jeikin's guided review captures screenshots at 320 CSS-pixel width per page and flags pages where horizontal scrolling appears. The dashboard records the visual evidence per page. Component-level CSS hints (fixed-width containers, min-width declarations) are flagged as leading indicators in the scanner.

References

W3C — Understanding 1.4.10 Reflow (opens in new tab)