In this demo we have two block-level boxes, one inside the other. The outer box has a large width set on it so the page will scroll horizontally. The inner box has a small width (and height) set on it so it sits comfortably inside the viewport, but its content is given a large width so it will also scroll horizontally.
By default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. To avoid this happening in the inline direction, we've set overscroll-behavior-inline: contain on the inner box.
HTML
<main>
<div>
<div>
<p>
<code>overscroll-behavior-inline</code> has been used to make it so that
when the scroll boundaries of the yellow inner box are reached, the
whole page does not begin to scroll.
</p>
</div>
</div>
</main>
CSS
main {
height: 400px;
width: 3000px;
background-color: white;
background-image: repeating-linear-gradient(
to right,
rgba(0, 0, 0, 0) 0px,
rgba(0, 0, 0, 0) 19px,
rgba(0, 0, 0, 0.5) 20px
);
}
main > div {
height: 300px;
width: 400px;
overflow: auto;
position: relative;
top: 50px;
left: 50px;
overscroll-behavior-inline: contain;
}
div > div {
height: 100%;
width: 1500px;
background-color: yellow;
background-image: repeating-linear-gradient(
to right,
rgba(0, 0, 0, 0) 0px,
rgba(0, 0, 0, 0) 19px,
rgba(0, 0, 0, 0.5) 20px
);
}
p {
padding: 10px;
background-color: rgba(255, 0, 0, 0.5);
margin: 0;
width: 360px;
position: relative;
top: 10px;
left: 10px;
}
Result