CSS Grid First Element height breaks with "all:unset;"

[DrEVILish]

Using Brave ([Version 1.60.114 Chromium: 119.0.6045.124 (Official Build) (arm64)] Using Firefox 119.0.1 (64-bit)

With CSS reset applied the first Row gets the wrong height applied in the CSS Grid, when trying to auto-height the rows to fill vertical space.

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; }

Currently causing an issue with heights of elements in CSS Grid:

.container {
   height: 100vh;
}

.drivers {
    display: grid;
    grid-template-rows: min-content; //makes the rows fit the height of the container
}

.driver {
    display: grid;
    grid-template-columns: 4vb 1fr 1fr 5vb 1vb;
    grid-template-rows: 1fr;
    justify-content: center;
    align-items: center;
}

<div .container>
<div .drivers>
<div .driver> DAVE </div>
<div .driver> STEVE </div>
<div .driver> MIKE </div>
<div .driver> McQueen </div>
</div>
</div>

**above should be all the relevant code please let me know if unable to reproduce.

Separately with all: unset; commented out, neither: * { margin-top: 0; } * { margin-bottom: 0; } cause the issue but together margin: 0 and margin-top: 0; margin-bottom: 0; causes the issue.

[graymatter00]

@DrEVILish Perhaps providing a codepen example would be helpful.

[DrEVILish]

https://codepen.io/DrEVILish/pen/abXWgRq

[graymatter00]

@DrEVILish I might be missing something here or misunderstanding what you want to achieve, so apologies if on the wrong track.

• Your codepen (which is different to the code in your original post) doesn't seem to be importing the-new-css-reset, so I don't see how the the-new-css-reset has anything to do with the issue.

• Using your codepen I can see how the first purple row (mike) is not the same height as the other purple rows. I can see this in both Chrome and Edge (dev). So it seems the issue is not limited to Brave.

• In Edge and Chrome I can make the row mike be the same height as the other purple rows by removing the grid-template-rows: min-content; at line 25, or set it to grid-template-rows: none;

• In Firefox, all the purple rows are short. That is, the same height as the mike row. And removing grid-template-rows: min-content; doesn't help. So you'll probably want to look deeper at how grids work and check your code on multiple browsers.

Grids can be tricky. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid

[DrEVILish]

There is definitely some strange behaviour with CSS grid.

The aim was to get the "drivers" to fill the remaining space, so if another element poped above they would responsively change size.

I've swapped to use

.drivers {
    display: flex;
    flex-direction: column;
}
.drivers .driver {
    flex-grow: 1;
}

worked straight time with no weird quirks.

Deffo an upstream bug, it would come and go when I commented in and out the { all: unset; } line.

Issue Closed.