Single-axis scroll containers

at a glance

reference routes

why it exists

CSS sticky positioning historically resolved against a single nearest scroll container for both axes. That breaks one of the most common layout patterns on the web: a wide table or data grid that scrolls horizontally inside a vertically scrolling page. The intent thread states the motivation plainly: the header should remain visible as the page scrolls vertically, while horizontally sticky content should stay attached to the inner scroller — but because the inner horizontal scroller became the sticky reference for both axes, “vertical sticking becomes ineffective”. Authors worked around it with duplicated headers, DOM restructuring, or JavaScript scroll synchronization.

The missing primitive was an element scrollable in one axis only. overflow-x: auto; overflow-y: hidden looks like it should do that, but hidden is a scrollable value: the y-axis remains a scroll container (programmatic scrolling still works), so the element is a dual-axis scroll container and sticky binds to it in both axes. Pairing a scrollable value with clip — a non-scrollable value that forbids scrolling entirely — produces a true single-axis scroll container, and the spec’s sticky rules then route each axis’s constraint to the nearest ancestor that actually scrolls in that axis.

how it works

CSS Overflow 3 classifies the overflow values and defines what each combination produces. Verbatim from §3.1:

“The scroll, auto, and hidden values are known as the scrollable values of overflow. They cause the box to be a scroll container and the affected axis to be a scrollable axis. […] The visible and clip values are known as the non-scrollable values. However, if the other axis specifies a scrollable value, a specified value of visible computes to auto, enabling scrolling in its axis. If neither axis computes to a scrollable value, the box is not a scroll container. If only one axis computes to a scrollable value (i.e. the other axis is clip), the box is a single-axis scroll container.”

CSS Overflow 3 §3 then names the container types: a single-axis scroll container is “a scroll container that is scrollable in only one axis”, a dual-axis scroll container is scrollable in both, and the x/y/block/inline-axis scroll container terms mean “scrollable in the specified axis, regardless of whether it can also scroll in the other axis”.

On the sticky side, CSS Position 3 §3.4 now resolves the constraint per axis — verbatim: “For a sticky positioned box, the inset properties represent insets from the respective edges of the scrollport of the nearest scroll container with a matching scrollable axis, defining the sticky view rectangle used to constrain the box’s position. (The sticky view rectangle can be constructed from edges of two different scrollports, if the nearest scroll container is a single-axis scroll container.)”

scroll APIs on the disabled axis

A single-axis scroll container still measures its full overflow, but the clipped axis holds no scroll offset and cannot be given one — established by the upstream WPT assertions:

• scrollWidth/scrollHeight still report the full content size (300×300 in the test fixture) — clipping does not shrink measured overflow.
• scrollLeft on the x-clipped axis reads 0 and stays 0: scrollTo()/scrollBy() calls that target the clipped axis do not move it, while the scrollable axis responds normally (scrollTop advances to 50, then 70 in the test).
• Dynamically changing an axis from a scrollable value to clip clamps that axis back to scroll offset 0 and repaints (single-axis-overflow-scroll-to-clip.html: “A scroller with overflow: hidden has one of its axes set to overflow: clip. It repaints with the axis set to overflow: clip at a scroll offset of 0.”).
• scrollIntoView() scrolls the scrollable axis only (single-axis-scroll-into-view.html, plus an RTL variant).

examples

The canonical pattern — a wide data grid that scrolls horizontally inside a vertically scrolling page, keeping its header sticky against the page:

.grid-viewport {
  /* scroll horizontally, but do NOT become a scroll container vertically */
  overflow-x: auto;
  overflow-y: clip;   /* = overflow: auto clip */
}

.grid-header {
  position: sticky;
  top: 0;             /* constrains against the nearest y-axis scroll
                         container — the page, not .grid-viewport */
}

.grid-first-col {
  position: sticky;
  left: 0;            /* constrains against .grid-viewport, the nearest
                         x-axis scroll container */
}

Before this feature the same markup needed overflow-y: hidden — which silently kept the element a dual-axis scroll container and broke the header’s vertical stickiness — or JavaScript scroll synchronization.

Ensuring a clipped axis truly stays in place (the second half of the listing summary):

.no-vertical-drift {
  overflow-y: clip;  /* no scrolling in y through ANY mechanism —
                        not wheel, not touch, not scrollTo() */
  overflow-x: scroll;
}

The Chrome Platform Showcase route for this feature returned 404 at check time (2026-07-29), so no live demo is embedded — the snippets above are the reference examples.

web platform tests

Upstream WPT coverage exists in two directories (fetched 2026-07-29):

• css/css-overflow/single-axis-overflow-scroll-to-clip.html (+ RTL ref) — dynamic scroll-to-clip transitions clamp the axis to offset 0
• css/css-overflow/single-axis-overflow-clip-rtl.html — clipped-axis behavior in RTL
• css/css-overflow/single-axis-scroll-apis-programmatic.html — scroll metrics and programmatic scrolls on the disabled axis
• css/css-overflow/single-axis-scroll-apis-dynamic.html — the same under dynamic style changes
• css/css-overflow/single-axis-scroll-into-view.html (+ RTL) — scrollIntoView on single-axis containers
• css/css-position/sticky/position-sticky-overflow-clip-container.html — “sticky elements do not consider overflow:clip containers as possible scroll ancestor”

browser compatibility

Interim table. No BCD key records this behavior — BCD css/properties/overflow.json has multiple_keywords (generic two-keyword overflow syntax: Chrome 68, Firefox 61, Safari 13.1) and a clip value key, but neither records single-axis scroll-container behavior or per-axis sticky resolution, and there is no dedicated web-features entry (webstatus query, 2026-07-29). Treating “multiple keywords supported” as support for this feature would be wrong; rows below are compiled from the linked primary sources.

security and privacy

• No new data exposure — this is a layout/scrolling behavior change; it reads nothing, stores nothing, and sends nothing over the network.
• No permission or policy surface — no Permissions-Policy directive, no enterprise policy, no user prompt is involved.
• Fingerprinting — per-axis sticky resolution and clipped-axis scroll clamping are observable through layout and scroll-offset reads (scrollTop/getBoundingClientRect()), but they reveal only the browser engine and version family, which layout behavior already reveals. No new fingerprinting vector was identified in the sources read.
• Usability consideration — clip forbids scrolling through any mechanism on that axis, including keyboard and assistive-technology scrolling; content clipped on that axis must not be essential-or-inaccessible. This is an authoring hazard of overflow: clip generally, not specific to this feature.

specifications

see also

• Chrome Platform Status — Single-axis scroll containers (API record)
• blink-dev — Intent to Prototype: CSS sticky positioning in single-axis scroll containers
• Chromium tracking bug 440038212 (and 481019005 from the intent)
• CL 7697174 — track clip and scrollable overflow combinations (merged); CL 7702333 — enforce scroll axis constraints in single-axis containers (merged)
• MDN — overflow (covers the base property; no single-axis or per-axis-sticky coverage at check time, 2026-07-29 — hence this page)
• MDN — position (sticky basics)