CSS grid renders behind parent's scroll bar in Firefox and Safari
According to CSS Tricks article, Preventing a Grid Blowout, the issue is connected with the sizing of the grid:
The real fix isn't all that difficult — we only need to understand what is happening. I can't promise I'm explaining this 100% accurately, but the way I understand it, the minimum width of a grid column is auto. […]
To apply our fix, we need to make sure that there is the column has a definite minimum width instead of auto.
The fix proposed in article, minmax
, seems to be working also for the case in question:
grid-template-columns: repeat( 10, minmax( 0, var(--ck-character-grid-tile-size) ) );
The simpler version, using fr
unit, also seems to work:
grid-template-columns: repeat( 10, minmax( 0, 1fr ) );
Demo of the fix: https://jsfiddle.net/gp8r0f94/