hidden Specifies that the content is clipped (i.e. In other words, it should be displayed outside the content box.
Possible Values visible Specifies that the content should not be clipped.
Three additional keywords have also been proposed: no-content, no-display, and clip, however, see the note below for information on these values. Browser supportĬlip has had support for quite a long time in all browsers except Safari, but support has landed in the Technical Preview for Safari 16, which should be released later this year.Overflow-y: visible | hidden | scroll | auto In the image you can see that the Polypane UI and its shadow on the right side expands beyond the border on the top and bottom of the element, but is neatly clipped on the right side.
The pink outline is the element with a horizontal clip but vertical visible value for the overflow. Here is a screenshot of the exaggerated effect. See the Pen Untitled by Kilian Valkhof ( on CodePen.Īs a more practical example I've used this on the Polypane homepage to prevent an image from expanding horizontally outside of the viewport (by adding an overflow-x: clip) to its wrapper, but allowing it to expand beyond the element vertically (with overflow-y: visible) to create more depth without the image influencing the layout. 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.
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. 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.
0 kommentar(er)
