Result Size: 625 x 664
x
 
<!DOCTYPE html>
<html>
<head>
<style>
#container, #pinkDiv, #yellowDiv {
  margin: 15px;
  padding: 3px;
  border: solid black 1px;
  overflow: auto;
}
#container {
  background-color: rgb(197, 255, 236);
  height: 370px;
}
#container p {
  width: 200%;
}
#leftDiv {
  float: left;
  width: 60%;
}
#pinkDiv, #yellowDiv {
  height: 150px;
  width: 80%;
}
#pinkDiv {
  background-color: rgb(255, 205, 213);
}
#yellowDiv {
  background-color: rgb(255, 255, 161);
  overscroll-behavior-x: contain;
}
</style>
</head>
<body>
<h1>Try yellow box with no overscroll chaining in the x-direction</h1>
<p>Put the mouse pointer over the pink box, scroll right to the end of it, continue scrolling, and the scrolling behavior will transfer to the green parent element. This is called overscroll chaining, when overscrolling on one element leads to scrolling behavior on the parent element. Scroll chaining is default behavior.</p>
<p><strong>Note: </strong>To scroll sideways in the x-direction to trigger overscroll-behavior, you might need to use swipe-gesture on a touchpad or a touchscreen.</p>
<p>Now, scroll to the left again, move mouse pointer over to the yellow box, scroll right to the end of it, continue scrolling, and you will see that scrolling is NOT transferred to the parent element in this case, bacause of the overscroll-behavior-x property value 'contain' that prevents this from happening.</p>
<div id="container">
  <div id="leftDiv">
    <div id="pinkDiv">