Two new properties in CSS - overflow:clip and overflow-clip-margin

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.

  <div id="hidden">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Laudantium, voluptatibus, vel fuga quae fugiat odio quidem consequatur ullam.
    <section>
      A realllllllyyyy loooooong line of text
    </section>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Numquam ipsam iure unde voluptas deleniti accusamus soluta, suscipit inventore veniam et.
  </div>

#hidden {
  width: 200px;
  height: 200px;
  border: 2px dashed black;
  overflow-x: visible;
  overflow-y: hidden;
}

section {
  width: 400px;
  font-size: 20px;
  margin: 10px 0;
}

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.

<div id="hidden">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam obcaecati tempore incidunt facere. Saepe quibusdam adipisci aut reprehenderit eaque laboriosam nisi ipsam distinctio maiores. Debitis, in neque! Nobis laborum amet atque, praesentium architecto recusandae in voluptate cumque consectetur dolore similique est. Eveniet officiis maxime laudantium! Reiciendis earum fuga corporis beatae?
</div>
<button onclick="doScroll()">Scroll to the end</button>

#hidden {
  width: 250px;
  height: 150px;
  overflow: hidden;
}

const hidden = document.getElementById("hidden");

function doScroll(){
    hidden.scrollTop = hidden.scrollHeight;
    hidden.scrollLeft = hidden.scrollWidth;
}

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

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

<div id="clip">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam obcaecati tempore incidunt facere. Saepe quibusdam adipisci aut reprehenderit eaque laboriosam nisi ipsam distinctio maiores. Debitis, in neque! Nobis laborum amet atque, praesentium architecto recusandae in voluptate cumque consectetur dolore similique est. Eveniet officiis maxime laudantium! Reiciendis earum fuga corporis beatae?
</div>
<button onclick="doScroll()">Scroll to the end</button>

#clip {
  width: 250px;
  height: 150px;
  overflow: clip;
}

const clip = document.getElementById("clip");

function doScroll(){
    clip.scrollTop = clip.scrollHeight;
    clip.scrollLeft = clip.scrollWidth;
}

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.

<div id="clip">
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Laudantium, voluptatibus, vel fuga quae fugiat odio quidem consequatur ullam.
  <section>
    A realllllllyyyy loooooong line of text
  </section>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Numquam ipsam iure unde voluptas deleniti accusamus soluta, suscipit inventore veniam et.
</div>

#clip {
  width: 200px;
  height: 200px;
  border: 2px dashed black;
  overflow-x: visible;
  overflow-y: clip;
}

section {
  width: 400px;
  font-size: 20px;
  margin: 10px 0;
}

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.

#clip {
  margin-top: 40px;
  width: 200px;
  height: 200px;
  border: 2px dashed black;
  overflow: clip;
  overflow-clip-margin: 40px;
}

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.