00:00hey there my front end friends overflow
00:01hidden is one of those CSS things that
00:03we just sort of need right but they can
00:06actually cause all sorts of issues like
00:09in this situation I want this image
00:11going off to the edge but it it's
00:13leading me to have a little bit of
00:14overflow so I just do the classic
00:16overflow X of hidden and that's great I
00:19guess but why do I have two scroll bars
00:22now that's kind of weird uh okay um hm
00:25and with this one that doesn't really
00:28scroll my sticky header works but on
00:31this one that's actually scrolling down
00:32the page my sticky header is not even
00:35sticking what's going on here well
00:37luckily for us we actually have two
00:39better Solutions now than we used to
00:41have with overflow of hidden one of them
00:44which is basically just the better
00:46version of overflow hidden to the point
00:48of where I'm not even sure if there's a
00:50good reason to use the hidden version
00:52anymore at all and the second option
00:55that I'm going to explore with you is
00:57actually a little bit more limited in
00:58how it works but it has the big
01:00advantage of being able to improve
01:01performance so in the right situation it
01:03is definitely a better alternative so
01:05let's jump back to this layout over here
01:07where we can explore things a little bit
01:08and I've turned off the Overflow hidden
01:10because it was giving us that double
01:11scroll bar thing and we're going to sort
01:13of pinpoint the best way to approach
01:15overflow hidden but then also the better
01:16ways of doing it uh and first of all you
01:19might notice that I'm actually in a
01:20different browser here this is polyan
01:22which is like a developer for browsers
01:23it's really cool there's a link down in
01:25the description if you do want to check
01:26it out you can actually open like
01:27multiple different views all at the same
01:29time time uh and and simu scroll and
01:32there's Dev tools it's all built in it's
01:34really really nice and in this case the
01:36reason I'm using this instead of just in
01:38Chrome is because one of the things
01:39that's annoying is when you have this
01:41type of overflow it's hard to figure out
01:43what's actually causing it sometimes and
01:45they have this handy little button all
01:47the way down to the bottom and it will
01:48highlight the thing in like a red color
01:51and if this wasn't an image it would
01:52actually have a background on it that
01:53would make it a little bit easier to see
01:55that shows you what the overflowing
01:57thing actually is and this is just one
01:58of those like really small all just Dev
02:00experience things that Killian has
02:02created in creating polyan here it's a
02:04really cool browser you can try it for
02:05free but if you do end up purchasing it
02:07and you do use the link down below it's
02:09at no extra cost to you but it will help
02:11my support my channel as well so I just
02:12want to throw that out there but let's
02:14turn off this and well actually let's
02:16turn it back on for a second because the
02:17main thing I want to look at here is
02:19once you've identified the thing that's
02:20overflowing that's what you want to
02:22Target instead of doing this cuz the
02:25HTML body overflows a Band-Aid onto a
02:28situation where that's probably not what
02:30you really want to be doing as I showed
02:32it can potentially cause tool scroll
02:34bars which is weird it can prevent
02:36sticky headings from sticking there's
02:38all sorts of issues with it so what
02:40we're going to do in this case is we're
02:41going to find the piece that's actually
02:43causing the Overflow and in this case
02:45it's it's overflowing out of my hero I
02:47have my hero I have this hero layout my
02:48hero content and all of that and I want
02:51to Target the hero itself and make sure
02:53nothing can actually come out of there
02:55so that's nice and easy to do I can just
02:57come here instead and do an overflow of
02:59hidden hit save but that's not what I
03:03wanted right uh there there's a lot of
03:06bad things happening now when I when I
03:08do this and the reason there's a lot of
03:11bad things happening is because as soon
03:13as I do that I have these nice shadows
03:14and other things and well I'm losing
03:16those shadows and let's just move my
03:18face out of the way a little bit here so
03:20you can see like if I come here I have a
03:23shadow that that is showing up a little
03:25bit but where's the rest of my shadow
03:26and this is what I want I want this
03:27thing that like it can overflow a little
03:29bit but then comes in this way oh I I
03:31know what the fix is everyone you're
03:32probably screaming me I don't want
03:33overflow on both I want to do an
03:35overflow X of hidden and while that
03:37might actually appear to work the
03:39problem is it it actually has caused
03:41another problem where uh I'm getting a
03:43extra scroll bar inside of my element so
03:46I can actually scroll in here now and
03:49let's just open this one up in Chrome
03:50just cuz chrome doesn't use the hidden
03:52scroll bars uh and now we can like quite
03:54clearly see that we have like this extra
03:56scroll bar here um I said hidden it
03:59should be a floating um and I know a lot
04:00of browsers these days do use the
04:02floating ones but just obviously Chrome
04:03on Windows doesn't so it makes it easy
04:05to see uh but we're getting this extra
04:07scroll bar that's coming in because when
04:09we do an overflow of hidden on something
04:12even if we're only doing one axis what
04:14we really want is Overflow hidden this
04:16way and I want an overflow y of visible
04:19right this is impossible we cannot do
04:22this you can set it you can declare it
04:23if you look in the dev tools it might
04:24even say that it's working but I
04:26guarantee you it's not what's actually
04:27happening is you're getting an over over
04:29flow of Auto in this direction and it's
04:32just one of those side effects of
04:33overflow hidden is the other axis cannot
04:36stay set to visible and just be sort of
04:38what it used to be so the solution here
04:41is instead of using a hidden we switch
04:43this over to clip and when I do the clip
04:45here it looks exactly the same as what
04:47we had but now I can actually switch
04:49this one over to visible and you'll
04:51notice the Overflow is coming out the
04:53top and the bottom and let's here let's
04:54put a border of like three pixels solid
04:57red on here just so we can really see uh
04:59we have that you can see it's
05:00overflowing at the top and the bottom
05:02but it's not overflowing out the right
05:04side if I switch this over to a hidden
05:06we get this with that annoying little
05:08extra scroll scrolly thing inside of
05:11here which we didn't want so clip to the
05:13rescue this is a new property it support
05:16is just over 90% as of the time of
05:19recording I'll put a browser support
05:20Link in the description though uh and
05:22it's just fantastic it's exactly like
05:24hidden except it lets you do visible and
05:26it actually lets you do something else
05:27that's really really cool uh as well
05:29we're going to look at um but it's nice
05:31that I can clip in One Direction keep
05:33visible in the other and I don't need to
05:35put the visible that's the default it
05:36just works uh and everything's fine and
05:38the nice thing with that is it keeps my
05:40shadow that I wanted as well so I still
05:42get my nice soft Shadow that's coming in
05:44uh down below and all of those things
05:46and I actually stole this sort of
05:49example uh from Killian who made the
05:51poly pane browser um in his actual blog
05:54so not the poplane blog but on his
05:56actual blog I'll link to the article
05:57below where he talks a bit about it had
05:59a similar sort of setup that was a bit
06:01fancier um for for the issue that he'd
06:04ran into and why clip worked here um but
06:07with the clip it just works we keep our
06:09shadow everything works we overflow the
06:11top and the bottom everything works and
06:12it that's it there's there's nothing
06:14hidden to it except as I said there is
06:16uh another property we actually get with
06:18this which is uh we're going to do a
06:21clip in all directions so let's just say
06:22overflow clip so it's clipped everywhere
06:25and then we actually get something
06:26that's really cool which is an overflow
06:28clip margin ooh what's that do let's
06:32just say one R and look I'm going one R
06:34out the top one R out the bottom and in
06:37this case I am also going you can't
06:38really see it but we are causing a
06:40little bit of Sid scrolling in doing
06:41that as you can see uh just because
06:43we're clipping it in both directions or
06:45the clip margin we're expanding It Out
06:47by one or two or whatever so you can
06:49actually like choose how much you're
06:50overflowing by that to me is just so
06:54kind of really really cool and awesome
06:57uh you know it's it's such a neat
06:58possibility you can say how much you
07:00want to overflow by now there is a
07:02problem with overflow clip margin while
07:04it's supposed to work if you only
07:06declare one axis you can see in Chrome
07:07it just makes the entire thing stop
07:09working this is a no and bug it's just
07:11not working properly and the Overflow
07:13clip margin is not supported in Safari
07:16right now but overflow clip is supported
07:19in all three of the major browser
07:20engines it's just the clip margin is a
07:22little bit limited but something to look
07:23forward to in the future uh because I
07:25think it's really cool that we can sort
07:26of control our overflow a little bit um
07:29really neat there we go problem solved
07:31don't use overflow hidden use overflow
07:33clip instead and your problem is solved
07:37uh just again don't do this on your body
07:38or your HTML generally that's not where
07:41you really care about the thing
07:42overflowing anyway you want to Target
07:44the thing that's actually causing the
07:45Overflow and limit it to that it just
07:48makes life a lot easier in general and
07:49doesn't have unintended consequences
07:51along the way and this next one we're
07:53going to look at is to solve this
07:54problem where I have these elements
07:56scrolling out the bottom here with this
07:57cool car parallx effect that I've done
07:59and this one is something that could
08:01potentially help with performance which
08:02is really nice but very quickly before
08:04we get to that I want to let you know
08:05that if you're looking up your CSS game
08:07I have a bunch of free and paid courses
08:09covering a range of topics and
08:10experience levels mostly focused on the
08:13world of CSS and getting better at that
08:15you can find them all over at my site
08:17powell. courses of course the link is
08:20also in the description but with that
08:22let's fix this problem that we have
08:23right here I will let you know that the
08:25Overflow clip in this case would work
08:27overflow uh let's do the y this time of
08:30clip and we're going to see that it
08:31solves the problem and that's awesome
08:34and just you can see if I did a hid in
08:35on here it would actually wouldn't solve
08:37it because it ruins my parallx effect
08:39and there's other ways we can get around
08:40that but it's so much easier just to do
08:42a clip and it just works but there's the
08:44one that can potentially help with
08:47performance so instead of doing the
08:48Overflow of clip I'm going to do a
08:50contain of paint and in this case it
08:53also works look at that so contain is
08:56part of the containment spec uh we have
08:58other options here like contain layout
09:00contain size contain inline size we use
09:02these for container queries uh for an
09:04example but what contain paint is
09:06telling the browser is that none of the
09:08children will never be painted outside
09:10of that parent element and the reason
09:13that can be good for performance is if
09:15the element is off screen it knows that
09:17all the children are also off screen and
09:19it's not going to try and paint them now
09:21it's a little bit more limited than
09:23overflow because I can't specify one
09:25Axis or the other if I'm doing contained
09:27paint it's on both the X and the Y AIS
09:29there's no other controls over it I
09:30don't have that clip margin that I can
09:32do so that is a bit of a limiting factor
09:35there but if it's one of those things
09:36where you don't have to worry about the
09:37axis there's not really any drawbacks to
09:39using this it's just going to work and
09:40as I said potentially also helps with
09:42performance and there's other situations
09:44like if you have a nav bar like I have
09:45in this case with like slides in and
09:47slides out when the page first loads if
09:51it's off screen the browser knows that
09:52it's off screen so on your nav list here
09:54I can do a contain of paint and it knows
09:56it doesn't have to paint anything until
09:58that element is needed all the children
10:00included on that now it does potentially
10:02have some side effects just so you know
10:04uh one of them being that it does create
10:06a new containing block so if you have
10:08positioned absolute elements they will
10:09be positioned to whatever has your
10:11contained paint on it uh and then if you
10:13have any fixed position fixed elements
10:15inside of there it would also no longer
10:17really work it would just be within that
10:19element you probably wouldn't have that
10:21but one of those side effects that does
10:22come up with a contain of paint and as I
10:25mentioned you can't specify contain in
10:27one AIS and not the other but the
10:28browser support is over 95% at this
10:30point but once again I'll put a link to
10:32can I use for the upto-date uh browser
10:34support in case you're watching this in
10:36the future Now quickly going back to
10:37this example here if you'd like to see
10:38how I created this parallx effect that
10:40we see right here and it's actually
10:41being done without any JavaScript at all
10:43this is all just pure CSS it's actually
10:45really pretty easy to do and I covered
10:47how to do that in this video right here
10:49and with that I would like to thank my
10:51enablers of awesome web on demand Andrew
10:53Simon Tim and Johnny as well as all of
10:55my other patrons for their monthly
10:56support and of course until next time
10:58don't don't forget to make your corner
10:59of the internet just a little bit more
![Welp, Here's what the Fed *Just* Said [Fed FOMC Minutes]](/_next/image?url=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fl8u23oq1E9E%2Fhqdefault.jpg&w=3840&q=75)
