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?
Fluz@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