This enables a number of interesting features, as well as making some designs easier to work with because you're no longer having to deal with the scroll areas: So while you might not care about something being a scroll area or not (and to be frank, there's few situations where that distinction really matters) using clip means the limitations that a scroll area has no longer apply: You can clip in one direction while keeping your content visible in another direction. Without the scroll area, that limitation is no longer there. Keeping the scroll area around means that the UI still could end up being scrolled, and because it was a scroll area, it also prevented the non-scrolling axis to be set to visible. Enter ClipĬlip was added for a particular reason: an element with overflow: hidden could still programmatically scroll (just not as the result of a user interacting with it). That limits the type of design you can implement without adding additional HTML to style. See the Pen Overflow: Clip example by Kilian Valkhof ( on CodePen. Setting two different directional overflows would let you configure your element such that it (for example) only scrolls in the vertical direction while wrapping text and hiding overflows in the horizontal direction, a common requirement.īut it turns out, they have a hidden dependency: You can't have one axis be hidden in any way (hidden, scroll and auto all limit the content from expanding beyond the element) while having the other one set to visible: overflow: hidden scroll will hide any horizontal overflows while adding a scrollbar for the vertical direction. Overflow is also a shorthand that also allows for two values: the first for the x direction and the second for the y direction. While overflow sets the overflow value for both axis, you can set a different value for both the x and y axis with overflow-x and overflow-y or with overflow-inline and overflow-block if you want to use logical properties. Often times You want overflow: auto, not overflow: scroll. auto: Depending on if the content fits or not the element gets a scrollbar.scroll: The element is made into a scrollable area with scrollbar, regardless of whether the content requires it.hidden: The content is clipped to the element and overflowing content is hidden.visible: The default value: any content that overflows is visibly rendered just where it would be if the block element was larger.The overflow property lets you control how content that overflows a block element should be displayed. So what does it do?īefore diving into clip, lets quickly go over what overflow does and what it's other values do. cut off, hidden), display an ellipsis (‘…’, Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings).You probably know overflow: hidden, overflow: scroll and overflow: auto, but do you know overflow: clip? It's a relatively new value for the overflow property, and with Safari 16 being released later this year all evergreen browsers will support it. The text-overflow property in CSS deals with situations where text is clipped when it overflows the element’s box.

Allow overflow css