← Back to release summary

Single-axis scroll containers

Category
CSS
Type
New or changed feature
Status
Proposed (Chrome Proposed)
Intent stage
None

Summary

Extends the `overflow` property to support scrollable values together with `clip` (for example, `overflow: scroll clip`). This allows `position: sticky` to be constrained by different ancestor scroll containers per axis, and gives authors a way to ensure an axis using `overflow: clip` stays in place.

Motivation

The CSS `overflow` property currently allows behavior to be specified per axis, but it does not provide a way to make a scroll container responsible for only a single axis. The affects features that depend on scroll containers, namely `position: sticky` and DOM scroll APIs. For example, authors may want to use `position: sticky` to create a table that keeps both the top and left labels in view while the user scrolls through large content. Or they may want to create a carousel that is visually clipped on one axis, while ensuring that `scrollIntoView()` does not unexpectedly move that clipped axis. Please see the explainer for more details.

Standards & signals

Explainers: https://github.com/explainers-by-googlers/single-axis-scroll-containers

View on chromestatus.com