<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 80%;
aspect-ratio: 2/1;
margin: auto;
border: solid black 2px;
overflow-x: scroll;
overflow-y: hidden;
scroll-snap-type: x mandatory;
writing-mode: vertical-rl;
scroll-padding-block-end: 20px;
}
.blue {
background-color: lightblue;
height: 95%;
aspect-ratio: 6/5;
}
.green {
background-color: lightgreen;
height: 80%;
aspect-ratio: 4/5;
}
.blue, .green {
margin: 2px;
scroll-snap-align: end none;
}
</style>
</head>
<body>
<h3>CSS scroll-padding-block-end property.</h3>
<p>With the writing-mode property value set to vertical-rl the end of the elements in the block direction is changed from bottom to left, and this also affects the scroll-padding-block-end property.</p>
<p>In this example, snap position is set to end in block direction, so the element in focus should snap into place with a 20px distance to the bottom of the container. But instead, because of the writing-mode value, the element in focus is offset by a 20px distance between child element and the left side of the container.</p>
<div id="container">
<div class="blue">Blue</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
<div class="green">Green</div>