◆ Grid の auto は要素のサイズになってコンテナをはみ出すことがある
◆ minmax で 0 から auto を指定するとコンテナ内に収められる

こんな感じの Grid があります

<!DOCTYPE html>

<style>
.grid {
display: grid;
grid-template-rows: 50px auto 50px;
grid-template-columns: 100px 100px;
width: 200px;
height: 200px;
background: paleturquoise;

& > div {
border: 1px solid steelblue;
}
}
.inner {
display: grid;
grid-template-rows: auto auto;

.body {
overflow: auto;
}
}
</style>

<div class="grid">
<div>1</div>
<div>2</div>
<div class="inner">
<div class="header">3</div>
<div class="body">
<p>A</p><p>B</p><p>C</p>
<p>A</p><p>B</p><p>C</p>
<p>A</p><p>B</p><p>C</p>
</div>
</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

<p>TEXT TEXT</p>

3 のエリアが広すぎて Grid のコンテナからはみ出します
body のところでスクロールできるようになってほしいのですが このスタイルだとなってくれません

grid-template-rows の auto のところが中身のサイズになるので コンテナサイズの上限で止まってくれません
1fr でも一緒です

サイズがわかるなら固定値で指定すると期待通りに動きます

<!DOCTYPE html>

<style>
.grid {
display: grid;
grid-template-rows: 50px 100px 50px;
grid-template-columns: 100px 100px;
width: 200px;
height: 200px;
background: paleturquoise;

& > div {
border: 1px solid steelblue;
}
}
.inner {
display: grid;
grid-template-rows: auto auto;

.body {
overflow: auto;
}
}
</style>

<div class="grid">
<div>1</div>
<div>2</div>
<div class="inner">
<div class="header">3</div>
<div class="body">
<p>A</p><p>B</p><p>C</p>
<p>A</p><p>B</p><p>C</p>
<p>A</p><p>B</p><p>C</p>
</div>
</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

<p>TEXT TEXT</p>

問題はサイズがわからないときです
いろいろ試してみたところ minmax 関数で 0 から auto を指定すれば動きました

<!DOCTYPE html>

<style>
.grid {
display: grid;
grid-template-rows: 50px minmax(0, auto) 50px;
grid-template-columns: 100px 100px;
width: 200px;
height: 200px;
background: paleturquoise;

& > div {
border: 1px solid steelblue;
}
}
.inner {
display: grid;
grid-template-rows: auto auto;

.body {
overflow: auto;
}
}
</style>

<div class="grid">
<div>1</div>
<div>2</div>
<div class="inner">
<div class="header">3</div>
<div class="body">
<p>A</p><p>B</p><p>C</p>
<p>A</p><p>B</p><p>C</p>
<p>A</p><p>B</p><p>C</p>
</div>
</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

<p>TEXT TEXT</p>

min-content や max-content も試しましたがこれだと効果はなかったです
これらは文字列の折返しみたいなところで効果的なものなので 縦に並ぶ場合はあまり意味がなく min も max も実際の縦サイズになってるようです
fit-content 関数も auto より小さくはならないみたいでダメでした

今回は内側の 3 のところも Grid にしてましたが 上下の 2 分割なので Flexbox にもできます
Flexbox の場合は Grid の方は auto のままで body に flex を指定すればいいです

<!DOCTYPE html>

<style>
.grid {
display: grid;
grid-template-rows: 50px auto 50px;
grid-template-columns: 100px 100px;
width: 200px;
height: 200px;
background: paleturquoise;

& > div {
border: 1px solid steelblue;
}
}
.inner {
display: flex;
flex-flow: column;

.header {
flex: none;
}

.body {
flex: 1 1 0;
overflow: auto;
}
}
</style>

<div class="grid">
<div>1</div>
<div>2</div>
<div class="inner">
<div class="header">3</div>
<div class="body">
<p>A</p><p>B</p><p>C</p>
<p>A</p><p>B</p><p>C</p>
<p>A</p><p>B</p><p>C</p>
</div>
</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

<p>TEXT TEXT</p>

個人的にはこっちのほうが好きです