Andrew's Digital Garden

Overflow hidden vs clip

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/

[[css]]

Overflow hidden vs clip