scrollable-japanese-vertical-writing-mode.html

<style>
  .container {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  
    overflow-x: scroll;
  
    border: 1px solid #000;
  }
  
  .column {
    display: flex;
    writing-mode: vertical-rl;
    border-left: 1px solid #000;
  }
  
  .column > .item {
    display: block;
    height: 240px;
    padding: 8px;
    border-bottom: 1px dotted #000;
  }
  
  .column > .item:last-child {
    border-bottom: none;
  }
</style>

<div class="container">
  <div class="column">
    <p class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Condimentum id venenatis a condimentum. Leo vel orci porta non pulvinar neque laoreet suspendisse. In arcu cursus euismod quis viverra nibh cras pulvinar mattis. Faucibus vitae aliquet nec ullamcorper. Dignissim suspendisse in est ante in nibh mauris. Tellus at urna condimentum mattis pellentesque id. Nec nam aliquam sem et. In pellentesque massa placerat duis ultricies. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Mauris rhoncus aenean vel elit. In est ante in nibh. Amet massa vitae tortor condimentum. Amet justo donec enim diam vulputate ut pharetra. Id diam maecenas ultricies mi eget. Proin nibh nisl condimentum id venenatis a condimentum vitae sapien.</p>
    <p class="item">そのころわたくしは、モリーオ市の博物局に勤めて居りました。十八等官でしたから役所のなかでも、ずうっと下の方でしたし俸給もほんのわずかでしたが、受持ちが標本の採集や整理で生れ付き好きなことでしたから、わたくしは毎日ずいぶん愉快にはたらきました。</p>
  </div>
  <div class="column">
    <p class="item">Convallis posuere morbi leo urna molestie at elementum eu. Velit scelerisque in dictum non consectetur. Sed arcu non odio euismod. In pellentesque massa placerat duis ultricies. Faucibus purus in massa tempor nec. Nibh sed pulvinar proin gravida hendrerit. Non tellus orci ac auctor. Blandit cursus risus at ultrices mi tempus imperdiet nulla malesuada. Ac tincidunt vitae semper quis lectus. Amet consectetur adipiscing elit ut aliquam.</p>
    <p class="item">殊にそのころ、モリーオ市では競馬場を植物園に拵え直すというので、その景色のいいまわりにアカシヤを植え込んだ広い地面が、切符売場や信号所の建物のついたまま、わたくしどもの役所の方へまわって来たものですから、わたくしはすぐ宿直という名前で月賦で買った小さな蓄音器と二十枚ばかりのレコードをもって、その番小屋にひとり住むことになりました。わたくしはそこの馬を置く場所に板で小さなしきいをつけて一疋の山羊を飼いました。毎朝その乳をしぼってつめたいパンをひたしてたべ、それから黒い革のかばんへすこしの書類や雑誌を入れ、靴もきれいにみがき、並木のポプラの影法師を大股にわたって市の役所へ出て行くのでした。</p>
  </div>
  <div class="column">
    <p class="item">Mi eget mauris pharetra et ultrices neque ornare aenean. Arcu non odio euismod lacinia at. Netus et malesuada fames ac turpis egestas. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Pulvinar elementum integer enim neque volutpat ac. Est lorem ipsum dolor sit. Condimentum lacinia quis vel eros donec ac odio tempor orci. Nulla aliquet enim tortor at auctor. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Justo donec enim diam vulputate ut pharetra sit amet. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Diam donec adipiscing tristique risus nec. Sit amet risus nullam eget felis eget nunc.</p>
    <p class="item">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
  </div>
</div>