missing scrollbars in canvas div wrapper flexbox item - html

Question

I want to show a canvas, possibly larger than the viewport.
The layout is common: navigation on the left, canvas, controls etc... on the right.
When the canvas is large, I want scrollbars around the canvas where needed. That's what the overflow=auto on the canvas div wrapper is for.
html {
height: 100%;
margin: 0;
}
body {
height: 100%;
margin: 0;
background: yellow;
}
.container {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
height: 100%;
overflow: hidden;
background-color: #b30a96;
}
.navigation {
background-color: darkkhaki;
}
.right {
display: flex;
height: 100%;
flex-direction: column;
background-color: red;
}
.canvas-wrapper {
overflow: auto;
background-color: #DE8D00;
}
#canvas {
display: block;
background-color: #0bb314;
}
.rest {
background-color: aquamarine;
}
<div class="container">
<div class="navigation">
navigation
</div>
<div class="right">
<div class="canvas-wrapper">
<canvas id="canvas" width="2500" height="1800"></canvas>
</div>
<div class="rest">
rest...
</div>
</div>
</div>
With only the flexbox, I see scrollbars just fine. As soon as I embed the flexbox in the grid, no more scrollbars.
A number of related posts shed some light but got me no closer to solving the problem.
I tried various permutations of width, height, max-width, max-height, min-width, min-height on the wrapper, the flexbox, the grid, with no satisfying result.
Before resorting to JavaScript and forcing the size of the div wrapper, I would like to know whether this can be solved in pure CSS.

Answer 1

after setting
grid-template-columns: fit-content(200px) minmax(0,1fr);
in class .container and adding
min-height: 0;
to class .right, the scrollbars are finally visible around the canvas.
As I understand it, the problem was that the div wrapper didn't have a size, and setting a minimum of zero somehow helps.