Let’s say we have some content that needs to be rendered inside a block element which has a specific height. Our content happens to be a little big for that element, which makes it “overflow” out of the element.
Haven’t we all been there?
So what do we do, we add one of the following values to the overflow property -
overflow: visible | hidden | auto | scroll
overflow: hidden, any content that spills out of the element box,
and not shown to the user. However,
overflow: hidden still allows for
method to programmatically scroll.
So technically, the element box remains a scroll container.
Consider a scenario where we would like to show content on the x-axis without getting clipped
and without a horizontal scrollbar while adding an
overflow: hidden to the y-axis.
As we can see, our element box does not allow for the content to be shown without scrolling horizontally.
This is where
overflow: clip comes in.
overflow: clip is similar to
in that, it clips the content to the element’s padding box.
The only big difference is
clip prohibits programmatic scrolling as well
and the element box is therefore,
not a scroll container.
To demonstrate the programmatic scrolling behavior, let’s take a look at this example.
div and set its overflow to
Notice in the above example, that we scrolled to the end of content.
overflow: clip, programmatic scroll is disabled. Here is an example.
Notice that the programmatic scroll does not work when you set overflow to
Another benefit to using
clip is we can have one axis set to hidden
and the other axis set to visible.
overflow-clip-margin determines how far from the element’s box the clipping starts.
It is specified as a length and does not allow negative values.
This new CSS property should be used with
overflow: clip, otherwise it will be ignored.
Notice that the long text on x-axis has been clipped off at 40px from the element’s edge.
overflow: clip is supported in all major browsers except Opera on android.
For an in-depth overview of browser support,
head over to caniuse.com.
overflow-clip-margin, there are a few things to consider.
As of now, Chrome, Edge, Firefox and Opera support
but it only works when both axes are using
Safari does not support
Check out more details
Thus, we see that, although the difference between
overflow: hidden is subtle,
overflow: clip could prove to be quite useful
in UI scenarios where programmatic scroll needs to be disabled
or we want to have one axis set to hidden and the other axis set to visible.