 Hey there, my friend and friends. Overflow hidden is one of those CSS things that we just sort of need, right? But they can actually cause all sorts of issues. Like in this situation, I want this image going off to the edge, but it's leading me to have a little bit of overflow. So I just do the classic overflow X of hidden. And that's great, I guess, but why do I have two scroll bars now? That's kind of weird. Okay. And with this one that doesn't really scroll, my sticky header works, but on this one that's actually scrolling down the page, my sticky headers not even sticking. What's going on here? Well, luckily for us, we actually have two better solutions now than we used to have with overflow of hidden. One of them, which is basically just the better version of overflow hidden to the point of where I'm not even sure if there's a good reason to use the hidden version anymore at all. And the second option that I'm going to explore with you is actually a little bit more limited in how it worked, but it has the big advantage of being able to improve performance. So in the right situation, it is definitely a better alternative. So let's jump back to this layout over here where we can explore things a little bit. And I've turned off the overflow hidden because it was giving us that double scroll bar thing. And we're going to sort of pinpoint the best way to approach overflow hidden and also the better ways of doing it. And first of all, you might notice that I'm actually in a different browser here. This is polypane, which is like a developer for browsers. It's really cool. There's a link down in the description if you do want to check it out. You can actually open like multiple different views all at the same time and simul scroll and there's dev tools. It's all built in. It's really, really nice. And in this case, the reason I'm using this instead of just in Chrome is because one of the things that's annoying is when you have this type of overflow, it's hard to figure out what's actually causing it sometimes. And they have this handy little button all the way down at the bottom. And it will highlight the thing in like a red color. And if this wasn't an image, it would actually have a background on it that would make it a little bit easier to see and it shows you what the overflowing thing actually is. And this is just one of those like really small just dev experience things that Kilian has created in creating polypane here. It's a really cool browser. You can try it for free, but if you do end up purchasing it and you do use the link down below, it's at no extra cost to you, but it will help support my channel as well. So I just want to throw that out there, but let's turn off this. And well, actually, let's turn it back on for a second because the main thing I want to look at here is once you've identified the thing that's overflowing, that's what you want to target instead of doing this because the HTML body overflows a Band-Aid onto a situation where that's probably not what you really want to be doing. As I showed, it can potentially cause tool scroll bars, which is weird. It can prevent sticky headings from sticking. There's all sorts of issues with it. So what we're going to do in this case is we're going to find the piece that's actually causing the overflow. And in this case, it's overflowing out of my hero. I have my hero, I have this hero layout, my hero content and all of that. And I want to target the hero itself and make sure nothing can actually come out of there. So that's nice and easy to do. I can just come here instead and do an overflow of hidden, hit save, but that's not what I wanted. There's a lot of bad things happening now when I do this. And the reason there's a lot of bad things happening is because as soon as I do that, I have these nice shadows and other things. And well, I'm losing those shadows. And let's just move my face out of the way a little bit here. So you can see, like if I come here, well, I have a shadow that is showing up a little bit, but where's the rest of my shadow? And this is what I want. I want this thing that like it can overflow a little bit, but then comes in this way. Oh, I know what the fix is everywhere. You're probably screaming, I don't want overflow on both. I want to do an overflow X of hidden. And while that might actually appear to work, the problem is it actually has caused another problem where I'm getting a extra scroll bar inside of my element. So I can actually scroll in here now. And let's just open this one up in Chrome just because Chrome doesn't use the hidden scroll bars. And now we can quite clearly see that we have like this extra scroll bar here. I said hidden, it should be a floating. And I know a lot of browsers these days do use the floating ones, but just obviously Chrome on Windows doesn't. So it makes it easy to see. But we're getting this extra scroll bar that's coming in because when we do an overflow of hidden on something, even if we're only doing one axis, what we really want is overflow hidden this way. And I want an overflow Y of visible, right? This is impossible, we cannot do this. You can set it, you can declare it. If you look in the DevTools, it might even say that it's working, but I guarantee you it's not. What's actually happening is you're getting an overflow of auto in this direction. And it's just one of those side effects of overflow hidden is the other axis cannot stay set to visible and just be sort of what it used to be. So the solution here is instead of using a hidden, we switch this over to clip. And when I do the clip here, it looks exactly the same as what we had, but now I can actually switch this one over to visible. And you'll notice the overflow is coming out the top and the bottom. And let's here, let's put a border of like three pixels solid red on here, just so we can really see. We have that, you can see it's overflowing at the top and the bottom, but it's not overflowing out the right side. If I switch this over to a hidden, we get this with that annoying little extra scroll, scrolly thing inside of here, which we didn't want. So clip to the rescue. This is a new property. Its support is just over 90% as of the time of recording. I'll put a browser support link in the description though. And it's just fantastic. It's exactly like hidden, except it lets you do visible and it actually lets you do something else. That's really, really cool as well that we're gonna look at. But it's nice that I can clip in one direction, keep visible in the other, and I don't need to put the visible. That's the default. It just works and everything's fine. And the nice thing with that is it keeps my shadow that I wanted as well. So I still get my nice soft shadow that's coming in down below and all of those things. And I actually stole this sort of example from Killian who made the polypane browser in his actual blog. So not the polypane blog, but on his actual blog. I'll link to the article below where he talks a bit about it, where he had a similar sort of setup that was a bit fancier for the issue that he'd ran into and why clip worked here. But with the clip, it just works. We keep our shadow, everything works. We overflow at the top and the bottom. Everything works. That's it. There's nothing hidden to it, except as I said, there is another property we actually get with this, which is we're gonna do a clip in all directions. So let's just say overflow clip. So it's clipped everywhere. And then we actually get something that's really cool, which is an overflow clip margin. Ooh, what's that do? Let's just say one RAM. And look, I'm going one RAM at the top, one RAM at the bottom. And in this case, I am also going, you can't really see it, but we are causing a little bit of side scrolling in doing that. As you can see, just because we're clipping it in both directions or the clip margin, we're expanding it out by one or two or whatever. So you can actually like choose how much you're overflowing by. That to me is just so kind of really, really cool and awesome. You know, it's such a neat possibility you can say how much you wanna overflow by. Now there is a problem with overflow clip margin. While it's supposed to work if you only declare one axis, you can see in Chrome, it just makes the entire thing stop working. This is a no and bug. It's just not working properly. And the overflow clip margin is not supported in Safari right now. But overflow clip is supported in all three of the major browser engines. It's just the clip margin is a little bit limited, but something to look forward to in the future. Cause I think it's really cool that we can sort of control our overflow a little bit. Really neat. There we go. Problem solved. Don't use overflow hidden. Use overflow clip instead and your problem is solved. Just again, don't do this on your body or your HTML. Generally that's not where you really care about the thing overflowing. Anyway, you wanna target the thing that's actually causing the overflow and limit it to that. It just makes life a lot easier in general and doesn't have unintended consequences along the way. And this next one we're gonna look at is to solve this problem where I have these elements scrolling out the bottom here with this cool car parallax effect that I've done. And this one is something that could potentially help with performance, which is really nice, but very quickly before we get to that, I wanna let you know that if you're looking to up your CSS game, I have a bunch of free and paid courses covering a range of topics and experience levels mostly focused on the world of CSS and getting better at that. You can find them all over at my site, kevinpaul.co forward slash courses. Of course, the link is also in the description. But with that, let's fix this problem that we have right here. I will let you know that the overflow clip in this case would work overflow. Let's do the why this time of clip. And we're gonna see that it solves the problem. And that's awesome. And just, you can see if I did a hidden on here, it actually wouldn't solve it because it ruins my parallax effect. And there's other ways we could get around that, but it's so much easier just to do a clip and it just works. But there's the one that can potentially help with performance. So instead of doing the overflow of clip, I'm gonna do a contain of paint. And in this case, it also works. Look at that. So contain is part of the containment spec. We have other options here, like contain layout, contain size, contain inline size. We use these for container queries, for an example. What contain paint is telling the browser is that none of the children will never be painted outside of that parent element. And the reason that can be good for performance is if the element is off screen, it knows that all the children are also off screen and it's not gonna try and paint them. And now it's a little bit more limited than overflow because I can't specify one axis or the other. If I'm doing contain paint, it's on both the X and the Y axis. There's no other controls over it. I don't have that clip margin that I can do. So that is a bit of a limiting factor there. But if it's one of those things where you don't have to worry about the axis, there's not really any drawbacks to using this. It's just gonna work. And as I said, it potentially also helps with performance. And there's other situations, like if you have a nav bar like I have in this case with like slides in and slides out, when the page first loads, if it's off screen, the browser knows that it's off screen. So on your nav list here, I can do a contain of paint and it knows it doesn't have to paint anything until that element is needed. All the children included on that. Now it does potentially have some side effects, just so you know, one of them being that it does create a new containing block. So if you have positioned absolute elements, they will be positioned to whatever has your contained paint on it. And then if you have any position fixed elements inside of there, it would also no longer really work. It would just be within that element. You probably wouldn't have that, but one of those side effects that does come up with a contain of paint. And as I mentioned, you can't specify contain in one axis and not the other, but the browser support is over 95% at this point. But once again, I'll put a link to what can I use for the up-to-date browser support in case you're watching this in the future. Now quickly going back to this example here, if you'd like to see how I created this parallax effect that we see right here. And it's actually being done without any JavaScript at all. This is all just pure CSS. It's actually really pretty easy to do. And I covered how to do that in this video right here. And with that, I would like to thank my naplers of awesome web on demand, Andrew Simon, Tim and Johnny, as well as all of my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.