grid内のflexboxが突き抜ける

前提・実現したいこと

HTMLでリストボックスを作っています(レイヤーのリスト表示に使用)
追加ボタンを押すとflexbox内にdiv要素を追加するという処理なのですが、
何個も追加してflexboxの高さより大きくするとそのまま突き抜けてしまいます。
突き抜けず、スクロールできるようにしたい(Flexboxのサイズをグリッドの高さに固定したい)のですがどうすればよいのでしょうか？
下記のコードはそれを簡略化したものです。

発生している問題・エラーメッセージ

Flexbox内の要素の高さがFlexboxの高さを超えるとスクロールにならず、そのままFlexboxの高さが大きくなる

該当のソースコード

HTML
1<html>
2  <div class="wrap">
3    <p>タイトル</p>
4    <div class="list_wrap">
5        <div class="list"></div>
6      <button>追加</button>
7    </div>
8  </div>
9</html>

CSS
1*{margin:0;}
2.wrap{
3  width:300px;
4  height:400px;
5  display: grid;
6  grid-template-rows: 30px 1fr;
7  border: 1px solid #000000;
8}
9.wrap>p{
10  grid-row:1;
11  margin:auto;
12}
13.list_wrap{
14  grid-row:2;
15  display:grid;
16  grid-template-rows:1fr 30px;
17}
18.list{
19  grid-row:1;
20  border: 1px solid #3d3d3d;
21  height:100%;
22  display:flex;
23  flex-direction:column;
24  overflow:auto;
25}
26.list_wrap>button{
27  grid-row:2;
28  height:auto;
29  margin:2px;
30}
31.item{
32  height: 30px;
33}

JS
1document.querySelector("button").addEventListener("click",this.addList);
2function addList(){
3  document.querySelector(".list").innerHTML+=`<div class="item">アイテム</div>`;
4}

試したこと

.list_wrapのgrid-template-rowsをfrから絶対値(px)に変えるとスクロールになるが、グリッドの高さが可変する用途なので、frを使いたい
.listの高さを絶対値に変えた(上と同様)

Lhankor_Mhy

2022/01/07 08:35

「グリッドの高さが可変する用途」とのことですが、何を基準に可変するのかご提示いただけますか？

doma1234

2022/01/07 08:56

説明が少なく申し訳ないです… 上記のコードでは見やすさの為にサイズを300x200にしていますが、本来はブラウザのウィンドウの高さを基準にしています cssだとhtml{height:100%}ですね

recal

2022/01/07 09:01

↓この部分のheightがブラウザの高さ100%ということでしょうか？ .wrap{ width:300px; height:400px;

recal

2022/01/07 09:03

こちらの固定値指定も不本意な値指定ですか？ .item{ height: 30px; }

doma1234

2022/01/07 09:13

>↓この部分のheightがブラウザの高さ100%ということでしょうか？そうです！ >こちらの固定値指定も不本意な値指定ですか？いえ、そっちはpx指定で構いません変動することも無いです

Lhankor_Mhy

2022/01/07 09:15

ということは、100％ - 30px ですか？

doma1234

2022/01/07 10:04

30pxはリスト内のアイテムの高さとして置いただけなので、おそらく本問題には関係しないと思われます（多分） frで計算された高さをそのままheightとして指定できればよいのですが、、、

Lhankor_Mhy

2022/01/08 00:38 編集

あ、いや、そっちの30pxではなくて、こっちです。 grid-template-rows: 30px 1fr この 30px が固定値ならば、100% - 30px でいいのでは、ということがお聞きしたいことです。（それでいいのであれば、スクロールバーが出ます）

doma1234

2022/01/08 01:59

すみません！完全に見落としていました... 確かにそれならできますね！あと、試しにcssではなく、javascriptで制御(一瞬.layer_itemを非表示→height:auto;時のclientHeightを取得してそのままheightに代入)をしてみたら、うまく行きました。こういったcssで出来るところをjsで強制的に操作するのって作法的(?)にOKなんですかね...？

Lhankor_Mhy

2022/01/08 02:09

特に問題ないと思います。

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

回答1件

少しいじってみました。
%だと伸びていってしまうのでvhを使いました。

chromeでしか確認してませんがどうでしょう？

htmlはbuttonをwrap直下に移動させました。

html
1<div class="wrap">
2  <p>タイトル</p>
3  <div class="list_wrap">
4    <div class="list"></div>
5  </div>
6  <button>追加</button>
7</div>

css
1* {
2  margin: 0;
3  box-sizing: border-box;
4}
5body {
6  overflow: hidden;
7}
8
9.wrap {
10  display: grid;
11  grid-template-rows: 30px 1fr 40px;
12  width: 300px;
13  border: 1px solid #000;
14}
15
16.list_wrap {
17  background: olive;
18}
19.list {
20  height: calc(100vh - 72px);
21  overflow-y: scroll;
22  background: plum;
23  border-top: 1px solid #3d3d3d;
24  border-bottom: 1px solid #3d3d3d;
25}
26.list_wrap + button {
27  margin: 2px;
28}
29
30.wrap > p {
31  margin: auto;
32}
33
34.item {
35  height: 30px;
36  background: tomato;
37}
38