Eric A. MeyerAug 4, 2023

me: 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

Show threadEric A. MeyerAug 4, 2023

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!

https://codepen.io/meyerweb/pen/eYQXERZ?editors=1100

Grid row track and element heights

...

CodePen
Show threadCSS by T. Afif Aug 4, 2023
@Meyerweb you are probably looking for min-height:0 on the canvas element?
Show threadEric A. MeyerAug 4, 2023
@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.
Show threadEric A. MeyerAug 4, 2023
@css Holy St. Francis, that worked. But why?
Show threadPotch
@Meyerweb @css I am looking to see if it's in a spec, but I'd imagine "canvas" might behave like "img" with respect to how width and height work, e.g. relative to content. Also, "canvas" has squirrely default dimensions that might need to be overridden.
Aug 4, 2023 at 7:30pmWeb
Show threadEric A. MeyerAug 4, 2023
@potch @css Would that mean the same problem if the `canvas` is wrapped in a `div` and 100% heights are enforced? I kept hitting problems trying to do that as well.
Show threadCSS by T. Afif Aug 4, 2023

@Meyerweb @potch

I 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.