I am encountering an issue with three div elements that have a writing-mode of vertical-rl. Despite setting the writing mode to vertical, the block stacking context is not being displayed from left to right as expected, but rather stacking inline.
CSS
.vertical{
width: 150px;
display:block;
writing-mode:vertical-rl;
}
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./styles/writingmode.css">
</head>
<body>
<div class="vertical">
<h2>Heading</h2>
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
<p>These boxes have a width.</p>
</div>
<div class="vertical">
<h2>Heading</h2>
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
<p>These boxes have a width.</p>
</div>
</body>
</html>
Expected behavior is that they would stack on top of each other (in the block direction since writing-mode is vertical) as this:
https://i.sstatic.net/7My7Q.png
Actual Behavior (stacking in inline direction)