Hello and welcome to this video on see csx floor property.
The overflow property is used to define or specify what happens to an element if it overflows its container.
I show you an example.
I've got my web page on the right here and my sis says an hastier male code on the left.
This image here.
It's an example often overflow.
It has overflown its container.
The image is embedded inside the container.
And also there are text inside that container.
This is a div that houses the image and the text.
So as you can see the image is outside the box.
So the Deve here I'm giving the did a border fence the blue box and is also got a whiff the style and
the collar.
What we are interested in here is this image here.
We want this image to fit inside the box.
We want to remove the overflow and the property you need to remove that overflow is called the overflow
property.
And there are a few values you can use with the overflow property you king specify to be visible visible
means you can see the overflow.
He didn't mean the overflow is hidden.
It's cliped and the rest of the content.
Second visible inside the container you can set the value to scroll.
The overflow is clipped but you can see the set scroll bar so you can see the rest of the content.
You can also set it all.
What does is that once the overflow has been clicked be you kinks now create this cruel bar to see the
rest of the content.
That depends on what content you have.
If you have lots of content that even after you've clicked the image you still can't see escrowed balis
created nobles you to see the rest of the image.
Sue to remove the overflow from Dave will use the overflow property and we can to use the order Valley.
What this would do is to clip it it to contain inside the dead.
So don't click fix here is the class which is the class are specified here so this becomes the selector
and the property for this select.
Here is the overflow and the value have set for the floor is all.
So what this would do it will automatically clip the MH 42 feet into the container and then in some
cases can create a scroll bar.
Is there a lot of content and enables you to see the rest of the content.
Once the image has been clipped into the container.
So if I refresh this we'll see.
See the image now is now inside the container.
If I had lots of techs here are another content that you couldn't see that has hidden as cruel bice
also created enables you to scroll and see the rest of the content.
So this is how you would use the POTO value with the overflow.
On the other value you can use is hidden hidden.
Does the same thing and what he does he keeps it hides the overflow and forces it to go into the container
so he does the same thing achieve the same objective as the gullied difference between the heading and
it is that with the auto.
There's lots of content after the images as being forced into the container.
It gives me a scroll bar so you can squirrel and see the rest of the current I of value you can use
with the overflow property is to scroll.
So if I saved that you see what that does you see.
So what that does is create the scroll because voila got limited content.
If I have lots of content it creates a scroll.
See there's really no way as you scroll down scroll sideways.
That's what this group does.
If it puts the overflow into the container and also creates a scroll on the vertically and horizontally
to allow you see the rest of the content.
Hi The Sideways of vertically are set back to hit it the most common values you would see developers
using this over look proper.
It is either hidden or all because they are the property values you can use we they include visible
initial We assess the property to the default and they inherit inherit this it will inherit from the
parent element.
But the most common values you will see people use is higher than his or all of.
So in this video we went through what the over property does.
And we also went through some of the values that can be used in the overflow property.
So the main function of Apollo property is to remove overflow from from the elements container.
And you can use several values with it visible here in scroll so initial and inherit initial just sets
the sets the value to high it was that is the original state.
Before the floor was removed and then scroll enables you to scroll left.
The rest of the content left or right it creates a scroll bar vertically and horizontally heading high.
The overflow fits the arrests of the whole or flown element into the container.
Visible allows you to see the overflow before any changes has occurred so visible it is in its original
state is overflowing.
So this is how you would use the overflow property.
Thank you so much for watching.
I hope the video has made sense since day care.
Bye for now.