overflow not respecting max height and width - html

Question

For the following code, I'm trying to make it so that whatever doesn't fully fit inside the magenta square (.body), it will overflow (with scrollbar) and still produce a neat layout.
However, when I try to throw something really large into that box, it just overflow (without scrollbar) and messes up the design. How can i solve this?
* {
box-sizing: border-box;
}
.grid-test {
display: grid;
grid-template-rows: 1fr 9fr;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.first {
border: 10px solid blue;
}
.second {
border: 10px solid red;
}
.wrapper {
display: grid;
grid-template-rows: 1fr 9fr;
height: 100%;
border: 10px solid orange;
max-height: 100%;
max-width: 100%;
}
.sub-header {
border: 10px solid lightblue;
}
.body {
// background-color: magenta;
border: 10px solid magenta;
overflow: hidden;
max-height: 100%;
max-width: 100%;
}
.canvas {
//width: 2000px;
//height: 1500px;
background-color: purple;
overflow: auto;
}
<div style="height: 100vh; width: 100vw; position: fixed; left: 0; top: 0; max-width: 100vw">
<div class="grid-test">
<div class="first">
</div>
<div
class="second"
>
<div
class="wrapper"
>
<div class="sub-header"></div>
<div class="body">
<div class="canvas"></div>
</div>
</div>
</div>
</div>
</div>
After placing a large element into it
* {
box-sizing: border-box;
}
.grid-test {
display: grid;
grid-template-rows: 1fr 9fr;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.first {
border: 10px solid blue;
}
.second {
border: 10px solid red;
}
.wrapper {
display: grid;
grid-template-rows: 1fr 9fr;
height: 100%;
border: 10px solid orange;
max-height: 100%;
max-width: 100%;
}
.sub-header {
border: 10px solid lightblue;
}
.body {
// background-color: magenta;
border: 10px solid magenta;
overflow: hidden;
max-height: 100%;
max-width: 100%;
}
.canvas {
width: 2000px;
height: 1500px;
background-color: purple;
overflow: auto;
}
<div style="height: 100vh; width: 100vw; position: fixed; left: 0; top: 0; max-width: 100vw">
<div class="grid-test">
<div class="first">
</div>
<div
class="second"
>
<div
class="wrapper"
>
<div class="sub-header"></div>
<div class="body">
<div class="canvas"></div>
</div>
</div>
</div>
</div>
</div>

Answer 1

I found another answer, although it wasn't related to grid, it helped me do what I wanted to achieve
nested flexbox height vs max-height