The behavior of overflow-x: auto depends on your web browser. Let’s explore each one more closely using coding examples. The following are the CSS overflow options available with CSS overflow-x: Also, Mozilla Firefox web browser supports a vendor-prefixed value. At the time of writing, CSS overflow-x accepts five values. This is the combination of overflow-x and its set of acceptable values. Possible Options For CSS Overflow x: Coding Examples To Use With the horizontal scroll bars, you can scroll to see the content.Īll this is possible via a set of options that you can use with CSS overflow-x. The overflowing content can appear on the left and right edges, so you can clip it, or add horizontal scroll bars to the element. Possible Options For CSS Overflow x: Coding Examples To UseĬSS overflow-x is a CSS property that allows you to show or hide the overflow content of an HTML block element.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. 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. 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:Ī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. 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. Overflow: Clip example by Kilian Valkhof ( 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |