<!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>