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

For overflow: hidden, any content that spills out of the element box, is clipped and not shown to the user. However, overflow: hidden still allows for programmatic scrolling using JavaScript. Meaning, we can use JavaScript’s scrollTo() 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

overflow: clip is similar to overflow: hidden, 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.

Add a div and set its overflow to hidden. Now, let’s “programatically” scroll to the part which got hidden using JavaScript.

Notice in the above example, that we scrolled to the end of content.

With, overflow: clip, programmatic scroll is disabled. Here is an example.

Notice that the programmatic scroll does not work when you set overflow to clip.

Another benefit to using clip is we can have one axis set to hidden and the other axis set to visible.

## overflow-clip-margin

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.

## Browser compatibility

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.

For overflow-clip-margin, there are a few things to consider. As of now, Chrome, Edge, Firefox and Opera support overflow-clip-margin, but it only works when both axes are using overflow: clip. Safari does not support overflow-clip-margin yet. Check out more details here.

## Conclusion

Thus, we see that, although the difference between overflow: clip and 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.

Need help on your Ruby on Rails or React project?