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/