<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 5px 15px;
padding: 3px;
border: solid black 1px;
overflow: auto;
}
#flex-container {
display: flex;
flex-wrap: wrap;
background-color: rgb(197, 255, 236);
height: 300px;
}
#flex-container > div {
flex: 1;
height: 150px;
}
#pinkDiv {
background-color: rgb(255, 205, 213);
}
#yellowDiv {
background-color: rgb(255, 255, 161);
overscroll-behavior: contain;
}
</style>
</head>
<body>
<h1>Try right box with no overscroll chaining</h1>
<p>Put the mouse pointer over the left pink box, scroll down to the bottom of it, continue scrolling, and the scrolling behavior will transfer to the green parent element. This is called overscroll chaining, when overscrolling in one element leads to scrolling behavior in the parent element. Scroll chaining is default behavior.</p>
<p><strong>Note: </strong>You might need to move the mouse pointer a little bit inside the pink box after scrolling down to transfer scrolling behavior to the green parent element.</p>