横スクロールできるようにしたい。

ここを参考にしつつ、下ののようなものを作ったのですが、横スクロールできませんでした。
できるだけflexを使いたいのですが、どのようにできるでしょうか？

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <link rel="stylesheet" href="https://cdn.jsdelivr.net/lightgallery.js/1.0.1/css/lightgallery.min.css">
5    <meta charset="UTF-8">
6    <style type="text/css">
7        html, body {
8            height: 100%;
9        }
10
11        .gallery-img {
12            margin: 1px;
13            height: calc(((100vh - 23px) / 3));
14            overflow: hidden;
15        }
16
17        .gallery-img img {
18            height: calc(((100vh - 23px) / 3));
19        }
20
21        #containe {
22            height: 100vh;
23            width: 100vw;
24            position: relative;
25        }
26
27        #lightgallery {
28            position: absolute;
29            white-space: nowrap;
30            display: flex;
31            flex-flow: column-reverse wrap-reverse;
32            width: 100vw;
33            height: 100vh;
34            float: right;
35            overflow-x: scroll;
36        }
37    </style>
38    <script src="https://cdn.jsdelivr.net/lightgallery.js/1.0.1/js/lightgallery.min.js"></script>
39    <script>
40        document.addEventListener("DOMContentLoaded", function () {
41            document.getElementById("containe").insertAdjacentHTML("beforeend", '<div id="lightgallery"></div>');
42            for (i = 1; i <= 100; i++) {
43                document.getElementById("lightgallery").insertAdjacentHTML('beforeend', '<a href="//placehold.jp/3e80e4/ffffff/300x300.png?text=' + i + '.jpg" class="gallery-img" download>' + '<img src="https://placehold.jp/000000/ffffff/300x300.png?text=' + i + '.jpg">' + '</a>');
44            }
45        }, false);
46    </script>
47</head>
48<body>
49<div id="containe"></div>
50</body>
51</html>

行動規範の内容に同意します

回答2件

Chromeのみ。flex自体ブラウザごとに安定しているといえず、writing-modeが絡むともっとでは。
writing-modeを使用しないなら #lightgallery に適切に長さが指定されないと無理です。（スクリプトで計算すれば当然出来ます）

CSS
1html, body {
2    height: 100%;
3    /**/
4    margin: 0;
5    padding: 0;
6}
7
8.gallery-img {
9    margin: 1px;
10    height: calc(((100vh - 23px) / 3));
11    overflow: hidden;
12}
13
14.gallery-img img {
15    height: calc(((100vh - 23px) / 3));
16}
17
18#containe {
19    height: 100vh;
20    width: 100vw;
21    position: relative;
22    /**/
23    writing-mode: vertical-rl;
24    overflow-x: scroll;
25}
26/**/
27#lightgallery {
28    white-space: nowrap;
29    display: flex;
30    writing-mode: vertical-lr;
31    flex-flow: row-reverse wrap-reverse;
32}
33```**動くサンプル：**[https://jsfiddle.net/cmgfc25t/](https://jsfiddle.net/cmgfc25t/)