[csswg-drafts] [css-overflow-4] Allow scrollable overflow to be clipped in off-axis (#12289)

flackr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-overflow-4] Allow scrollable overflow to be clipped in off-axis ==
When developers create scrolling containers that are only intended to scroll in one direction, they'll sometimes have content which slightly overflow in the other axis. Per the [css-overflow-3](https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip:~:text=The%20visible/clip%20values%20of%20overflow%20compute%20to%20auto/hidden%20(respectively)%20if%20one%20of%20overflow%2Dx%20or%20overflow%2Dy%20is%20neither%20visible%20nor%20clip.) spec:

> The [visible](https://www.w3.org/TR/css-overflow-3/#valdef-overflow-visible)/[clip](https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip) values of [overflow](https://www.w3.org/TR/css-overflow-3/#propdef-overflow) compute to [auto](https://www.w3.org/TR/css-overflow-3/#valdef-overflow-auto)/[hidden](https://www.w3.org/TR/css-overflow-3/#valdef-overflow-hidden) (respectively) if one of [overflow-x](https://www.w3.org/TR/css-overflow-3/#propdef-overflow-x) or [overflow-y](https://www.w3.org/TR/css-overflow-3/#propdef-overflow-y) is neither visible nor clip.

This seems to mean that even if you set the off axis overflow to `clip` it will still compute to `hidden`. While this is not a problem for user scrolling, `overflow: hidden` is still programmatically scrollable. Calls to scrollIntoView or anchor link scrolls can accidentally vertically scroll to your overflowing content. Worse yet, a user has no way to undo this after it happens.

This originally came up as a scroll-marker bug [crbug.com/422733086](https://issues.chromium.org/422733086) ([Demo](https://codepen.io/flackr/pen/vEOxoGJ)), however this problem can easily occur with existing content. E.g. consider this demo with "accidental" vertical scrolling when clicking on an item to scroll it into view: https://jsbin.com/voxohip/edit?html,css,js,output

Proposal: We should allow overflow `clip` in the off axis to make that axis not scrollable. E.g. `overflow: auto clip;` should allow creating a scroll container which *cannot* be scrolled vertically.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12289 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 5 June 2025 16:18:32 UTC