A Simple Fix for Your CSS Overflow Problems

If you’ve ever needed to have a menu or something similar overflow from its parent, but only in one direction, you probably ran into unexpected scrollbar issues while using `overflow: hidden.` Luckily, clip solves this problem!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:22 - The problem with overflow: hidden
01:28 - Using overflow: clip instead
02:22 - clip-margin

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[eypacha]

remember a few years ago when I watched your videos, 95% of your content was new to me. Today, I can say the percentages have flipped (but I still watch every time I see the notification bell). This shows how great of a teacher you are. Thank you so much!

[kaslmineer]

overflow-clip-margin feels like something you would get in a GUI designing program not CSS.

it feels like its out of CSS.

love it

[DeepTitanic]

Overflow clip margin is good for handling drop shadows

[ArminGips]

Avoid moving menu items - stable navigation is crucial for usability. Keep menu elements in consistent locations to help users build muscle memory and navigate efficiently.

[LePhenixGD]

Finally, I can properly make an overflox-x hidden while still make the overflow-y visible !

[PaulAllsopp-rhgb]

As an application developer, as opposed to a website developer, one of the first things I do when designing my layouts is fix them in place. Need something? Pop it out!
I have a Bootstrap 5 Offcanvas that messes with my scrollbars, so I'll have to try this.
Thank you as always, sir!

[NaserPapi-xz]

This post covers a very important issue. Thank you for your efforts, @Kevin.

[eioluseyi]

overflow-clip-margin is wild!!
I love it!!!

[MatejaArh]

Thank you so much. I almost went insane trying to solve the issue. This works perfectly!

[NashBrooklyn]

we also need overflow:hover and clip together so it hides the scrollbar when not scrolling and shows scrollbar when scrolling while scrollbar overlaps the context instead of pushing context away from the edge -

[the_quantum_nexus]

Just had a use for overflow-clip-margin. Very nice feature.

[kevincocquyt]

What a great way to change the CSS for SwiperJS so custom navigation can be displayed (partially) outside the container, for which "overflow: hidden" is normally set.

[EHKvlogs]

I am learning CSS. I have noticed an issue that images inside flex parent stretch vertically in a weird way on safari iphone, and fixed backgrounds dont even show.

[dave]

Seeing the refresh behavior there reminds me to ask: has Kevin ever covered techniques to avoid “flash of unstyled text” artifacts that happen before custom fonts are loaded in? I’ve solved it myself in various ways, but I want to hear the king’s official stance 😄

[GilGoldshlager]

I wish we could animate the overflow-clip-margin property to easily make an hover reveal effect instead of using units or clip-path.

[Turabbo]

Could you do one on clip-path? 🙂 It took me ages before I learned that inset has a "round" argument when used inside a cip-path. It's one of my favourite good-to-know patterns.

[JamesBlackburn]

Are there any browser compatibility issues with using overflow-x: clip and overflow-clip-margin?

[Stoney_Eagle]

I have one use case for that overflow clip margin, neat! 😲
I use clip by default but ran in some weird cases where I had to go back to hidden. Still don't know why 😅

[tounsoo]

Overflow-clip-margin with negative value would be very useful

[quoclam]

I just found a(n) (not-so) edge-case where I'd prefer hidden. I have a carousel, which has two divs and the parent of the carousel. I had to put clip on the parent even though the carousel had clip. That suggests if I had a really long overflow, I'd have to use clip for every parent