Skip to content

Rule · Accessibility

Content overflows horizontally at 320px

a11y/reflow-overflowwarnvoid a11yupdated

Why it matters

WCAG 1.4.10 requires content to reflow at 320 CSS px (equivalent to 400% zoom) without horizontal scrolling; overflow also breaks mobile layouts.

How to fix it

Find the element wider than the viewport (fixed widths, long unbroken strings, wide tables/code) and let it shrink: max-width: 100%, min-width: 0 in flex/grid children, overflow-wrap: anywhere, or a scroll container for tables.

Example

ts
img, video, pre, table { max-width: 100%; }
.flex > * { min-width: 0; }

References

void a11y reports 48 rules in this category. WCAG 2.2 AA through axe-core, plus checks axe can't do alone: visible keyboard focus, 24/44px target size on mobile, 320px reflow and disabled zoom.