On February 15, 2024, I learned...

How to set a certain amount of CSS overflow

From Bramus:

Because overflow: hidden creates a scroll container it can interfere with the Scroll-Driven Animations scroller lookup mechanism. The fix is to use overflow: clip instead.

That’s the problem and the solution in a nice’n’tidy explanation. I was aware of overflow: clip but it was this little blurb that make my ears perk up:

Additionally, using overflow: clip also allows you to use overflow-clip-margin to determine how far outside its bounds an element may be painted.

New to me! I also learned that the property clips the visual box at the padding-box. We can set a second value specifying exactly which box to clip:

overflow-clip-margin: content-box 3rem;

I’m not sure why I have a habit of using overflow: hidden over clip. Must be decades-old muscle memory that I never thought to revisit. But now I think I’ll reach for clip from here on out; it’s the same outcome as hidden but, to Bramus’s point, it doesn’t interfere with Scroll-Driven Animations. Plus, we gain more flexibility to set the boundaries.

Source

1 Comments
  1. pd
    # February 25, 2024

    It’s great that little-known use cases, under used gems can be found and publicised …

    Although believing there’s some gem out there that might do what we are striving for, get us out of a bind, can also be the source of many wasted hours ????????????

    A singular resource for obscure CSS use cases would be golden. The likes of caniuse and tutorials are valuable for sure. However, much like there’s been a suggestion somewhere to build an open source ‘design system’, reference sites and tutorials assume nothing and a lot before they even get started. More resources that focus on how to achieve common patterns with minimal, logical, semantic markup and framework-free CSS would be great. Something like CSS Garden but rather than illustrating how to use CSS to fulfill a graphic designers wet dream, focused on simple, straightforward basics of CSS layout.

    For example, I’ve just implemented my first ‘card’ type of layout with subgrid for rendering rows, across cards, with consistent height. That’s some sort of freaky puppet mastery going on there, getting that done. Once upon a time ‘spanning rows’ would be assumed to generate a box that, you know, spans more than one row whilst boxes alongside it may not. However, when using subgrid, grid-row: span X is a property for instructing the browser to vertically size every X row(s) across otherwise disconnected cards!

    That’s some sort of bizarro weirdness going on there. Took me long enough to realise subgrid was a keyword for grid-template-columns instead of display!!!

    Those CSS WG committee meetings most be a psychedelic hoot! ????

    Reply

Leave a Reply

Markdown supported