Reflow at 320 px

Three miniature pages with identical content in a 320 px stage: reflow, fixed width, and reflow with experimental effects.

007 · LayoutSupportedStarted 2026-10-03 · updated 2026-10-03

Demo width

Full768375

Open full screen

Loading demo…

Principles

Reflow without two-dimensional scrolling

Content should remain intact at 320 CSS px without page-level two-dimensional scrolling, even when experimental visual effects are enabled.

StandardW3C (2024)Content must reflow at the equivalent of 320 CSS px without two-dimensional scrolling.

Hypothesis

If three miniature page variants with identical navigation, cards, tables, code, and forms are shown in a 320 px stage, reflow variant A should not need horizontal scrolling or clip content; fixed-width B should overflow and clip content; reflow-plus-effects C should still avoid horizontal overflow.

Measured by: Per variant at 320 px: stage overflow (scrollWidth − 320 px); component rectangles beyond the stage or content wider than their boxes; meaningful content clipped by overflow hidden/clip; stray elements outside the stage; keyboard-accessible table/code scroll regions; and page overflow at the current viewport. Tolerance is 1 px.
Falsified if: Falsified if A overflows more than 1 px or contains overflowing/clipped components, C overflows, or B passes without overflow (the instrument fails to discriminate).

Implementation

A · A · Reflow: Fluid layout with wrapping navigation, minmax card grid, and keyboard-scroll regions for tables and code.
B · B · Fixed width: Deliberately failing control: 480 px root, nonwrapping cards with fixed height, tables and code without independent scroll regions.
C · C · Reflow + effects: Variant A plus ambient layers, a clipped 140% decorative strip, and a sticky bar.

The test stage is always exactly 320 CSS px wide, with no border or padding so clientWidth remains 320. Visitors can run the instrument at any viewport width while testing WCAG SC 1.4.10. The stage is full-bleed to keep the demo page usable at 320 px.

Variant B is the deliberately failing control: 480 px root, nonwrapping 200 px-wide flex cards with 2.5em clipped text, a 560 px table without a scroll container, and preformatted code without its own scrolling region. If B passes, the instrument is suspect.

Tables and code in A/C use keyboard-focusable overflow-x:auto wrappers with tabindex=0, role=region, and aria-label, following the SC 1.4.10 exception for intrinsically two-dimensional content. The instrument verifies scrolling, keyboard focus, and accessible names rather than assuming them.

Variant C tests reflow with experimental effects: absolute ambient layer, a 140%-wide strip rotated −4° inside an overflow:clip container, and a sticky-position bar. Without clipping, the strip would escape the stage. scrollWidth checks exempt the clipping container because that property includes clipped content, while still checking the container's bounding box and stage scrollWidth.

400% zoom was not tested separately: SC 1.4.10 defines the equivalent of 320 CSS px, matching 1280 physical pixels at 400% zoom. Testing at 320 CSS px is the chosen equivalent condition.

An early instrument treated a screen-reader-only table caption as clipped because it used overflow hidden inside a 1 px box. This was an instrument artifact: the caption remained available to assistive technology. The check was corrected to exclude such intentionally clipped elements; numbers remained unchanged except the Clipped column (A/C from 1 to 0, B from 2 to 1).

Observations

Three variants in a 320 px stage

For each variant, Measure records stage overflow, overflowing/clipped components, stray elements, keyboard-scroll regions, and page overflow. Three trials at 1280 px, one at 375 px, one at 320 px, and one with reduced motion emulated.

Chrome 154 headless (CDP), 2026-10-03, 1280×900, 375×812, and 320×568

Variant	Stage overflow +px	Overflowing components	Clipped	Stray	Keyboard scroll	Page overflow +px
A · Reflow	0 px	0 of 5	0	0	2/2	0 px at all widths
B · Fixed	308 px	5 of 5	1 (Card)	47 (td, div, tr)	—	0 at 1280; 281 at 375; 308 at 320 px
C · Reflow + effects	0 px	0 of 6	0	0	2/2	0 px at all widths

Stage figures were identical across widths and trials: A/C had 0 px overflow, no clipped or overflowing components, no stray elements, and two named keyboard-scroll regions. B overflowed by 308 px with all five components overflowing, clipped card text, and 47 stray elements. B caused page overflow of 281 px at 375 px and 308 px at 320 px, but not at 1280 px. A/C never caused page overflow, and reduced motion did not change the results.

24-route regression sweep at 320 px

Open each route at 320×568; record document scrollWidth − clientWidth and elements outside the viewport edge, excluding named independent scroll regions.

Chrome 154 headless (CDP), 2026-10-03, 320×568

Group	Routes	Notes
Lab indexes	5 (/, /eksperimen, /prinsip, /referensi, /temuan)	—
Experiment pages	7	—
Demo	7	Demo 001: 3 closed off-canvas panels inside an overflow-hidden lane
Principle samples	3	—
Reference samples	2	—

All 24 routes passed with no horizontal document scrolling at 320 px. The only offscreen elements were three intentionally hidden panels in demo 001, contained in a lane with overflow:hidden; they did not increase document scrollWidth.

Cross-browser replication: three variants

Run the same Measure instrument via Playwright: open demo, click Measure, read results. Three trials at 1280 px, one at 375 px, one at 320 px, and one under emulated reduced motion per engine. Stage values matched in every run.

Firefox 155 and WebKit 26.6 (Playwright, headless), 2026-10-03, 1280×900, 375×812, and 320×568

Variant	Stage overflow +px	Overflowing components	Clipped	Stray	Keyboard scroll	Page overflow +px
A · Reflow	0 px	0 of 5	0	0	2/2	0 px at all widths
B · Fixed	308 px	5 of 5	1 (Card)	47 (td, div, tr)	—	0 at 1280; 281 at 375; 308 at 320 px
C · Reflow + effects	0 px	0 of 6	0	0	2/2	0 px at all widths

Results were identical across Firefox and WebKit: A/C had 0 px overflow, no overflowing/clipped components, and keyboard-scroll regions; B overflowed by 308 px with all five components affected, clipped card text, and 47 stray td/div/tr elements. B caused +281 px page overflow at 375 px and +308 px at 320 px, none at 1280 px. Reduced motion did not change the figures.

84-route regression sweep at 320 px

Repeat the regression sweep and expand it from 24 sampled routes to all 84 lab routes: five indexes, seven experiment pages, seven demos, 28 principle pages, and 37 reference pages. Run once per engine at 320×568.

Firefox 155 and WebKit 26.6 (Playwright, headless), 2026-10-03, 320×568

Group	Routes	Notes
Lab indexes	5 (/, /eksperimen, /prinsip, /referensi, /temuan)	—
Experiment pages	7	—
Demo	7	Demo 001: 3 closed off-canvas panels inside an overflow-hidden lane
Principle pages	28 (all)	—
Reference pages	37 (all)	—

All 84 routes passed without any horizontal document overflow at 320 px in both engines. The only offscreen elements were the same intentionally contained, closed panels in demo 001.

Findings

Supported

At a 320 px test stage, the reflow and reflow-plus-effects variants had 0 px overflow, no overflowing or clipped components across replications and viewports, and accessible keyboard-scroll regions, even with experimental ambient, clipped 140% strip, and sticky bar. The fixed-width control failed all metrics (+308 px; 5/5 overflowing components; clipped card text; 47 stray elements). A separate 24-route lab sweep at 320 px found no horizontal page scrolling.

Limitations

Five component types (navigation, cards, tables, code, forms) plus three visual effects were evaluated; maps, canvases, video, and editors were not.
Chrome 154, Firefox 155, and WebKit 26.6 headless; physical Safari/Firefox and a real 320 px device were not tested.
400% zoom was not run as a separate condition; testing at 320 CSS px was treated as equivalent under SC 1.4.10.
The Chrome sweep included all indexes, experiments, and demos but sampled only three principle pages and two reference pages; Firefox and WebKit covered all 84 routes.
Touch was approximated by viewport width, not gestures; keyboard-scroll regions were not checked with real screen readers.

Evaluation

Usability: One variant selector and one Measure button; the miniature form submits and the miniature navigation links to sections. Results are understandable without additional instructions.
Accessibility: The instrument verifies table/code scroll regions with overflow:auto, tabindex=0, and accessible names; tables have captions, input labels wrap fields, submit status uses role=status, and red overflow highlights complement the data table. axe-core was not run.
Responsive: The 320 px stage fits a 320 px viewport and results tables scroll independently. Stage figures matched at 320, 375, and 1280 px and under reduced motion; the 24-route sweep found no overflow.
Performance: Demo transfers about 154 KB of JavaScript. The instrument only performs synchronous layout reads (rect, scrollWidth); no animations are measured.
Craft: B intentionally looks broken in the stage; red outlines flag overflowing elements after measurement.

Area: Layout