Eric A. Meyerme: writes #CSS for literally an entire generation
also me: co-authors a 1,126 page tome on CSS
also also me: cannot figure out how to make a three-row CSS grid behave the way I want it to in all responsive cases
So I boiled my problem down a simplified test case and it’s still driving me bonkers — the more so because Gecko does what I expect, but Chromium and WebKit do not. In those two, when the rendering window gets short (that is, not much height), the `canvas` element overflows its grid row, despite being set to `height: 100%`. In Gecko, it always stays within its grid row, as I want it to do. Nor can I find a way to get the Gecko behavior across the board. Argh!
CSS by T. Afif 
@Meyerweb you are probably looking for min-height:0 on the canvas element?
@css Probably not? The problem is it’s too tall, not too short. And in my experiments, `max-height: 100%` didn’t help either. I just added it to be sure, and nope, still overflowing in WebKit and Chromium.
@css Holy St. Francis, that worked. But why?
@Meyerweb the default `min-height: auto` of CSS grid was the culprit. It dictates that an element cannot be smaller than a specific size called "content-based minimum size" and I suppose each engine is calculating this size differently.
It's not a surprise since the definition of it is ambiguous: https://www.w3.org/TR/css-grid-1/#min-size-auto
For classic elements it's easy but for canvas (having intrinsic stuff) it's probably complicated
PotchI think so. In that case, the grid item will be the div and its "content based minimum size" will depend on its content and the canvas still play a role here and can create the overflow.
min-height:0 on the grid item should (in almost all the cases) fix such issue because you will disable that restriction and your height: 100% will take the lead.