2 better alternatives to overflow: hidden

hey there my front end 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 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 uh okay um hm 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 header is 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 works 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 but then also the better ways of doing it uh and first of all you might notice that I'm actually in a different browser here this is polyan 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 time uh and and simu 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 to 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 that shows you what the overflowing thing actually is and this is just one of those like really small all just Dev experience things that Killian has created in creating polyan 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 my 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 cuz 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 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 right uh there there's a lot of bad things happening now when I 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 I have a shadow that 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 I know what the fix is everyone you're probably screaming me 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 it actually has caused another problem where uh 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 cuz chrome doesn't use the hidden scroll bars uh and now we can like quite clearly see that we have like this extra scroll bar here um I said hidden it should be a floating um 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 uh 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 dev tools it might even say that it's working but I guarantee you it's not what's actually happening is you're getting an over over flow 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 uh 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 it support is just over 90% as of the time of recording I'll put a browser support Link in the description though uh 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 uh as well we're going to look at um 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 uh 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 uh down below and all of those things and I actually stole this sort of example uh from Killian who made the poly pane browser um in his actual blog so not the poplane blog but on his actual blog I'll link to the article below where he talks a bit about it had a similar sort of setup that was a bit fancier um for for the issue that he'd ran into and why clip worked here um but with the clip it just works we keep our shadow everything works we overflow the top and the bottom everything works and it that's it there's there's nothing hidden to it except as I said there is uh another property we actually get with this which is uh we're going to 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 R and look I'm going one R out the top one R out the bottom and in this case I am also going you can't really see it but we are causing a little bit of Sid scrolling in doing that as you can see uh 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 uh you know it's it's such a neat possibility you can say how much you want to 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 uh because I think it's really cool that we can sort of control our overflow a little bit um really neat there we go problem solved don't use overflow hidden use overflow clip instead and your problem is solved uh 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 want to 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 going to look at is to solve this problem where I have these elements scrolling out the bottom here with this cool car parallx 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 want to let you know that if you're looking 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 Kevin powell. 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 uh let's do the y this time of clip and we're going to see that it solves the problem and that's awesome and just you can see if I did a hid in on here it would actually wouldn't solve it because it ruins my parallx effect and there's other ways we can 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 going to do a contain of paint and in this case it also works look at that so contain is part of the containment spec uh we have other options here like contain layout contain size contain inline size we use these for container queries uh for an example but 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 going to try and paint them now it's a little bit more limited than overflow because I can't specify one Axis or the other if I'm doing contained paint it's on both the X and the Y AIS 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 going to work and as I said 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 uh 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 uh and then if you have any fixed 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 AIS and not the other but the browser support is over 95% at this point but once again I'll put a link to can I use for the upto-date uh 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 parallx 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 enablers 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 don't forget to make your corner of the internet just a little bit more awwesome

Channel: Kevin Powell

Views: 130,172

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css tutorial, tutorial, css overflow, overflow, overflow hidden, overflow clip, overflow auto, overflow hidden one axis only, css overflow problems, overflow issues, css contain, contain paint, css containment, overflow hidden css, css tricks, css overflow property, css overflow hidden, css overflow scroll, css overflow auto

Id: 72pUm4tQesw

Length: 11min 3sec (663 seconds)

Published: Thu Dec 14 2023