v153 · single-axis scroll containers
The scroll you did not ask for
Three horizontal strips, written three ways, each holding one card taller than the strip with a button at its bottom. Focus that button and the browser will scroll it into view — on whichever axis is a scrollport, whether or not you wanted one.
Focus the buried button
overflow: scroll clip
Not run yet.
overflow-x: scroll; overflow-y: clip
Not run yet.
The third lane is the same declaration written as longhands. It is here because the shorthand and the longhands are not obviously equivalent when a coercion is involved, and the only way to know is to measure both — which this page does.
Why this is worse than it looks
A container scrolled on an axis with no scrollbar cannot be scrolled back by the user. There is nothing to grab and nothing to see; the content is simply displaced, and it stays displaced. Every route into the container hits it: focus(), an anchor link, scrollIntoView, a screen reader moving the virtual cursor, and the on-screen keyboard pushing a focused field upward on a phone.
The usual workaround is to make the vertical axis impossible to overflow — fixed heights, cropped content, overflow-y: clip on a wrapper. Pairing clip with a scrollable value removes the need for any of it: the axis is not a scrollport, so there is no offset to displace.