clip
is a new value for overflow
that is similar to hidden
. However, using overflow: hidden
even on a single axis, will always dictate that the other axis is also hidden - you cannot do the following:
.nav-bar { overflow-x: hidden; overflow-y: visible; }
clip
does not have this behaviour, meaning you can restrict content on one axis without affecting the other. Note that this also disables programmatic scrolling.
overflow-clip-margin
also exists to dictate the space between the element and where the clipping begins.
Unfortunately I haven't found a way to have scrolling in one axis, and visible in the other.
https://blog.saeloun.com/2022/11/11/overflow-clip-and-overflow-clip-margin-properties/ https://ishadeed.com/article/overflow-clip/