Transcript from the "Overflow" Lesson
[00:00:00]
>> Brian Holt: So let's work on the holes. Notice right now there just kinda coming out of nothing. It'd be really cool if we could get them to come out of like a black hole, right? So I wanna say hole. And its background color is black.
>> Brian Holt: Border radius, 50%, cuz we want it to be round, right, like a hole should be.
[00:00:27]
>> Brian Holt: Overflow, so overflow is what happens if the stuff inside of an element is bigger than the element itself, right? Typically, so just for example, if i say width 200 VW right now.
>> Brian Holt: Notice, I have to scroll side to side here? This is cuz this is saying overflow scroll.
[00:00:53]
So because this element is larger than the viewport, it's saying if this gets bigger than that, then allow the user to scroll side to side. If I said overflow hidden here.
>> Brian Holt: And I refresh. Now, notice this is still off the page, right? But I can't scroll any more.
[00:01:15]
So that's what overflow hidden does. If something overflows here, just hide whatever overflows here.
>> Brian Holt: What I'm gonna do here is overflow visible.
>> Brian Holt: Which just means if something goes larger than the element that it's in, just let it, don't let them scroll, but still show whatever is overflowing.
[00:01:40]
>> Brian Holt: So now,
>> Brian Holt: And I need to get rid of that.
>> Brian Holt: So with these little moles in their holes, right, I'm gonna add some height and width here in just a second. But if the mole is larger than the hole, then let them still be able to see their little paws.
[00:02:04]
In fact, I can show you what that looks like here in just a second.
>> Brian Holt: So I'm going to say width. And I just kind of eyeballed this, 267 pixels, and height 267 pixels.
>> Brian Holt: So notice right now, the moles are fitting perfectly inside their holes. I actually wanted the hole to be a little bit more constricted than that, and I also wanted it to be circular.
[00:02:30]
>> Brian Holt: So now, notice they are kinda a little more constricted. Notice that the mole is overflowing in it, right?
>> Brian Holt: But notice you can still see him. So if I did overflow hidden here, what do you think would happen?
>> Brian Holt: Notice that now the moles don't overflow their holes, which is not what we wanted.
[00:02:51]
So that's why we did visible. Or we it could you scroll and force people to scroll on the moles, which would be super weird, right? Now they have they all have little scroll boxes on them.
>> Brian Holt: That's actually a little charming [LAUGH].
>> Brian Holt: But now, we're going for, okay.
[00:03:12]
>> Brian Holt: Make sense so far?
>> Brian Holt: I just wanna say that this is so much more pleasant coding CSS like this than it was five years ago. This was so much harder to do without flex box and a bunch of things like that.