以下のようなレイアウトのグリッドレイアウトがあります。
この1エリア(lowerleft)内だけを、スクロール可能にしたいです。
lowerleftのcssの"overflow-y"を"scroll"にしてもスクロールはできませんでした。
lowerleftの要素がoverflowすると、別のエリアのサイズが変わったりとレイアウトが崩れてしまいます。

)

ソースコード

css
1html, body {
2        width: 100%;
3        height: 100%;
4        margin: 0;
5        padding: 0;
6        overflow: hidden;
7    }
8
9    .container {
10        display: grid;
11        grid-template-columns: 0.5fr 1.5fr;
12        grid-auto-rows: 1fr;
13        gap: 0px 0px;
14        grid-auto-flow: row;
15        width: 100%;
16        height: 100%;
17    }
18
19    .left {
20        display: grid;
21        grid-template-columns: 1fr;
22        grid-template-rows: 0.25fr 1.75fr;
23        gap: 0px 0px;
24        grid-auto-flow: row;
25        grid-area: 1 / 1 / 2 / 2;
26    }
27
28    .lowerleft {
29        height: 100%;
30    }
31
32    .upperleft {
33        background-color: rgb(237, 28, 36);
34    }
35
36    .main {
37        background-color: rgb(34, 177, 76);
38    }
39
40    .lowerleft {
41        overflow-x: hidden;
42        overflow-y: auto;
43        height: 100%;
44        background-color: rgb(63, 72, 204);
45    }
46

html
1    <div class="container">
2        <div class="left">
3            <div class="upperleft"></div>
4            <div class="lowerleft">
5                <ul>
6                    <li>item</li>
7                    <li>item</li>
8                    <li>item</li>
9                    <!--以下略...-->
10                </ul>
11            </div>
12        </div>
13        <div class="main"></div>
14    </div>
15

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

回答2件

ベストアンサー

左カラム全体を画面高に制限して、はみ出した部分をスクロールさせたいということですよね。

左カラムに height: 100vh; を設定すればいいでしょう。

css
1.left {
2  display: grid;
3  grid-template-columns: 1fr;
4  grid-template-rows: 0.25fr 1.75fr;
5  gap: 0px 0px;
6  grid-auto-flow: row;
7  grid-area: 1 / 1 / 2 / 2;
8  height: 100vh; /* 追加 */
9}