Hello everyone and welcome back.
In today's video we will learn more about Hundley overflows in just a minute so overflow happens when
the content is too big to fit inside the parent element.
The sea is overflow property controls what happens when the content is to be unseen.
This provides us with following overflow values visible hidden scroll and auto.
So let's try this one by one.
So this is our image of 700 pixels by 560 pixels and it is wrapped inside a div.
Let's give this give an idea.
See output.
Let's save it.
Let's give some status to this rapper.
Say with six hundred pixels and Height five hundred pixels.
So if we say this overflow visible so visible is the default value.
So what what's happening is even when the content is bigger than the rapping element it still is visible.
The next one is hidden.
So what happens is the only content is clipped only the content which can be shown inside this estimate
element is visible.
So let's try back let's say that as you can see the mountain images clip now.
So if I remove this i save it you see a bigger image.
But when I bring back a little hidden and I just cropped.
Only 600 pixels by 500 pixels is visible.
Moving on to the next one which is scroll.
So when we use overflow scroll the estimate element is made inscrutable when the content overflows.
So let's say this.
And as you can see the images clearly well inside the wrapping div.
All right now moving on to the last one which is auto so the estimate element becomes the scroll level
when the content overflows.
Let's see that.
And as you can see it is scrolling exactly the way it was with school.
But the difference between scroll and auto is document overflow is set as scroll.
Scroll bars are visible even then the content is not worth doing.
Let us when overflow is set as auto scroll bars are only visible and the content is bigger than the
HDMI element.
So let's try that.
Let's change this back to school.
So let's do this.
Let's increase the width and height.
Say 800 pixels by Senator pixels.
So as you can see even then the image is smaller than the wrapping div that it still has these scroll
bars on the top and bottom.
But if you change this to auto and save it you don't see any scroll bar because that image is smaller
than the wrapper div but if you change this word to say six hundred and height to 500 pixels you start
seeing this gold bars again so that's the difference between auto and scroll.
That's all for today guys.
If there's something that you did not understand.
Feel free to drop a comment and we will discuss it.
See you in the next video.
Bye.
And take care.