<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
CSS | overscroll-behavior-y
</
title
>
<
style
>
.container {
display: flex;
}
.main-content {
width: 200px;
background-color: lightgreen;
}
.smaller-box {
overscroll-behavior-y: contain;
height: 100px;
width: 125px;
margin: 25px;
overflow-y: scroll;
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
b
>CSS | overscroll-behavior-y</
b
>
<
p
>overscroll-behavior-y: contain</
p
>
<
div
class
=
"container"
>
<
div
class
=
"main-content"
>
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.<
br
><
br
>
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.
</
div
>
<
div
class
=
"smaller-box"
>
This is a smaller element that is also
scrollable. The overscroll behavior
can be used to control if the main
content behind would scroll when this
element's vertical boundary is reached.
</
div
>
</
div
>
</
body
>
</
html
>