Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style>
#container, #pinkDiv, #yellowDiv {
  margin: 15px;
  padding: 3px;
  border: solid black 1px;
  overflow: auto;
}
#container > p {
  width: 200%;
}
#container {
  background-color: rgb(197, 255, 236);
  height: 370px;
}
#leftDiv {
  float: left;
  width: 60%;
}
#pinkDiv, #yellowDiv {
  height: 150px;
  width: 80%;
}
#pinkDiv {
  background-color: rgb(255, 205, 213);
  writing-mode: vertical-rl;
}
#yellowDiv {
  background-color: rgb(255, 255, 161);
  writing-mode: vertical-rl;
  overscroll-behavior-block: contain;
}
</style>
</head>
<body>
<h1>Try yellow box with no overscroll chaining in the block-direction</h1>
<p>The writing-mode property value 'vertical-rl' changes block-direction from the y-axis to the x-axis, so now the overscroll-behavior-block works in the x-direction instead of the y-direction.</p>