Reflow

Who this affects

Low-vision users at 400% zoom on a 1280px display see a 320px viewport. Requiring both horizontal and vertical scrolling to read a single line of text makes reading exhausting.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

<div class="fixed-shell">
  <h1>Our shops</h1>

  <div class="cols">
    <div class="col"><h2>Riverside</h2><p>12 River Street</p></div>
    <div class="col"><h2>Old Town</h2><p>4 Market Row</p></div>
    <div class="col"><h2>Hillgate</h2><p>88 Hillgate Lane</p></div>
  </div>

  <h2>Notes</h2>
  <div class="clipped">
    <p>Our Riverside shop has step-free access, an accessible toilet, and a hearing
       loop at the counter. Assistance dogs are welcome in all three shops.</p>
  </div>

  <p class="nowrap">Email us at hello@riverlinebooks.example for accessibility enquiries.</p>
</div>

<div class="shell">
  <h1>Our shops</h1>

  <div class="cols">
    <div class="col"><h2>Riverside</h2><p>12 River Street</p></div>
    <div class="col"><h2>Old Town</h2><p>4 Market Row</p></div>
    <div class="col"><h2>Hillgate</h2><p>88 Hillgate Lane</p></div>
  </div>

  <h2>Notes</h2>
  <div class="notes">
    <p>Our Riverside shop has step-free access, an accessible toilet, and a hearing
       loop at the counter. Assistance dogs are welcome in all three shops.</p>
  </div>

  <p class="wrap">Email us at hello@riverlinebooks.example for accessibility enquiries.</p>

  <h2>Opening hours by shop</h2>
  <div class="table-scroll" tabindex="0" role="region" aria-labelledby="hours-cap">
    <table>
      <caption id="hours-cap">Opening hours by shop and day</caption>
      <thead>
        <tr><th scope="col">Shop</th><th scope="col">Mon–Fri</th><th scope="col">Sat</th><th scope="col">Sun</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">Riverside</th><td>9–6</td><td>10–4</td><td>Closed</td></tr>
        <tr><th scope="row">Old Town</th><td>9–5</td><td>10–4</td><td>Closed</td></tr>
      </tbody>
    </table>
  </div>
</div>

<!-- The target: 320 CSS pixels wide with no loss of content or functionality,
     and no scrolling in two directions. 320px is not arbitrary - it is what a
     1280px display shows at 400% zoom, which is the magnification many
     low-vision users work at every day.

     Exempt from the no-horizontal-scroll rule: data tables, maps, diagrams,
     code blocks, and video - content that genuinely needs two dimensions.
     Your page layout is never exempt. -->

The bug that breaks reflow most often

Almost every reflow failure in a modern layout comes from one CSS rule that nobody wrote. Grid and flex items default to min-width: auto, which means they refuse to shrink below the intrinsic minimum width of their content. One long unbreakable string — a code sample, a URL, a wide table — and the whole column stops shrinking, taking the page with it.

.grid-item {
  min-width: 0;   /* allow this item to be narrower than its content */
}

What makes it hard to spot is that the offending child is usually behaving perfectly. A <pre> with overflow-x: auto scrolls its own content correctly and looks fine in isolation. It still reports its full content width as its intrinsic size, and that number propagates up through every grid and flex ancestor until something has a min-width that stops it.

Where else this bites

• A flex row containing a long email address or a file path.
• A card grid where one card holds a wide data table.
• A sidebar layout where the main column holds a code sample.
• Anything using white-space: nowrap inside a grid or flex child.

The companion fix for text is overflow-wrap: break-word, which lets long words break rather than forcing the container wider.

Testing this properly

1. Set the browser window to 1280 px wide and zoom to 400%. That gives you a 320 px viewport — which is why 320 is the number, not an arbitrary phone width.
2. Check for a horizontal scrollbar on the page itself. Content that scrolls inside its own container is fine; the page must not.
3. Confirm nothing is cut off or unreachable — overflow is only the mechanical half of this criterion.
4. Remember the exemptions: data tables, maps, diagrams, code blocks and video may require two dimensions. Your page layout never does.

To check a whole site at once, see tools/check-reflow.mjs in this repository — it renders every page at 320 × 256, applies the 1.4.12 text-spacing overrides, and names the widest offending element when it finds overflow.

How to test it

Set the browser to 1280px wide and zoom to 400%, or set the viewport to 320×256 CSS pixels. Nothing may be cut off, and the page must not scroll horizontally except for exempt content.

• Automated

  Requires rendering at the target viewport and inspecting for horizontal overflow and lost content.

  No axe rule maps to this criterion. It has to be checked by a person.

• Keyboard

  Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

• Screen reader

  Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

• Visual

  Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

Related criteria

• 1.4.4 Resize Text (Level AA)
• 1.3.4 Orientation (Level AA)
• 1.4.12 Text Spacing (Level AA)

In the specification

• Understanding 1.4.10 Reflow — the W3C explanation, intent and exceptions
• 1.4.10 in the WCAG 2.2 Recommendation — the normative wording