1
00:00:00,690 --> 00:00:03,490
Hello everyone and welcome back.

2
00:00:03,510 --> 00:00:10,110
In today's video we will learn more about Hundley overflows in just a minute so overflow happens when

3
00:00:10,110 --> 00:00:13,210
the content is too big to fit inside the parent element.

4
00:00:14,140 --> 00:00:19,680
The sea is overflow property controls what happens when the content is to be unseen.

5
00:00:19,690 --> 00:00:27,280
This provides us with following overflow values visible hidden scroll and auto.

6
00:00:28,150 --> 00:00:29,880
So let's try this one by one.

7
00:00:31,180 --> 00:00:38,210
So this is our image of 700 pixels by 560 pixels and it is wrapped inside a div.

8
00:00:38,650 --> 00:00:40,690
Let's give this give an idea.

9
00:00:40,720 --> 00:00:41,700
See output.

10
00:00:42,820 --> 00:00:43,670
Let's save it.

11
00:00:44,200 --> 00:00:48,810
Let's give some status to this rapper.

12
00:00:48,850 --> 00:00:57,450
Say with six hundred pixels and Height five hundred pixels.

13
00:00:57,990 --> 00:01:04,540
So if we say this overflow visible so visible is the default value.

14
00:01:04,560 --> 00:01:11,240
So what what's happening is even when the content is bigger than the rapping element it still is visible.

15
00:01:11,250 --> 00:01:12,920
The next one is hidden.

16
00:01:12,930 --> 00:01:18,790
So what happens is the only content is clipped only the content which can be shown inside this estimate

17
00:01:18,810 --> 00:01:20,520
element is visible.

18
00:01:20,550 --> 00:01:27,790
So let's try back let's say that as you can see the mountain images clip now.

19
00:01:28,260 --> 00:01:31,760
So if I remove this i save it you see a bigger image.

20
00:01:31,820 --> 00:01:36,110
But when I bring back a little hidden and I just cropped.

21
00:01:36,110 --> 00:01:40,250
Only 600 pixels by 500 pixels is visible.

22
00:01:40,250 --> 00:01:43,360
Moving on to the next one which is scroll.

23
00:01:43,460 --> 00:01:51,260
So when we use overflow scroll the estimate element is made inscrutable when the content overflows.

24
00:01:51,650 --> 00:01:53,400
So let's say this.

25
00:01:53,430 --> 00:02:01,020
And as you can see the images clearly well inside the wrapping div.

26
00:02:01,100 --> 00:02:09,050
All right now moving on to the last one which is auto so the estimate element becomes the scroll level

27
00:02:09,060 --> 00:02:10,620
when the content overflows.

28
00:02:11,070 --> 00:02:11,910
Let's see that.

29
00:02:12,410 --> 00:02:20,110
And as you can see it is scrolling exactly the way it was with school.

30
00:02:20,620 --> 00:02:26,110
But the difference between scroll and auto is document overflow is set as scroll.

31
00:02:26,110 --> 00:02:29,510
Scroll bars are visible even then the content is not worth doing.

32
00:02:29,870 --> 00:02:35,770
Let us when overflow is set as auto scroll bars are only visible and the content is bigger than the

33
00:02:35,770 --> 00:02:36,670
HDMI element.

34
00:02:37,180 --> 00:02:38,050
So let's try that.

35
00:02:38,890 --> 00:02:40,500
Let's change this back to school.

36
00:02:41,440 --> 00:02:42,820
So let's do this.

37
00:02:42,820 --> 00:02:44,850
Let's increase the width and height.

38
00:02:45,310 --> 00:02:49,380
Say 800 pixels by Senator pixels.

39
00:02:49,410 --> 00:02:55,560
So as you can see even then the image is smaller than the wrapping div that it still has these scroll

40
00:02:55,560 --> 00:02:57,280
bars on the top and bottom.

41
00:02:57,990 --> 00:03:04,320
But if you change this to auto and save it you don't see any scroll bar because that image is smaller

42
00:03:04,320 --> 00:03:12,530
than the wrapper div but if you change this word to say six hundred and height to 500 pixels you start

43
00:03:12,530 --> 00:03:17,340
seeing this gold bars again so that's the difference between auto and scroll.

44
00:03:18,180 --> 00:03:19,270
That's all for today guys.

45
00:03:19,290 --> 00:03:21,490
If there's something that you did not understand.

46
00:03:21,600 --> 00:03:24,630
Feel free to drop a comment and we will discuss it.

47
00:03:24,630 --> 00:03:25,810
See you in the next video.

48
00:03:25,830 --> 00:03:26,260
Bye.

49
00:03:26,280 --> 00:03:27,000
And take care.