Eric A. Meyer

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

Aug 4, 2023 at 2:12pmElk
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 threadCSS by T. Afif Aug 4, 2023

@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

CSS Grid Layout Module Level 1

Show threadPotchAug 4, 2023
@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.
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.

Show threadZacAug 4, 2023
@Meyerweb
Show threadZacAug 4, 2023
@Meyerweb
Show threadEric A. MeyerAug 4, 2023

@zachariah Actual LOL

/cc @estelle

Show threadSheldonAug 4, 2023

@Meyerweb I'm burning your books, Eric!

I read the comment and then noticed the name.

Kidding about the burning part. I'm only going to burn an Eric Meyer effigy, but I'm buying your book.

I learned almost everything I needed to know to continue learning CSS from your 2nd edition and I've been slowly losing ground ever since learning from patchwork sources. I'll be picking up your 5th edition today to get back on track.

Show threadIan TindaleAug 4, 2023
@Meyerweb …I have to look up which one is which – padding and margin

every single time!