CSS grid renders behind parent's scroll bar in Firefox and Safari

Question

I have an absolutely positioned panel (fixed height, overflow scroll) and a grid with square tiles (10 columns). In Chrome, the grid renders correctly:

But in FF/Safari, the last column is displayed behind wrapper's scrollbar which is odd:

What I want is the same behavior in all browsers (like in Chrome). How do I get this?

jsFiddle

:root {
 --ck-character-grid-tile-size: 24px;
}

body * {
  box-sizing: border-box;
}

.wrapper { 
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  background: red;
  position: absolute;
  top: 50px;
  left: 50px;
  outline: 1px solid black;
}

.grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  background: blue;
}

button {
  background: yellow;
  width: var(--ck-character-grid-tile-size);
  height: var(--ck-character-grid-tile-size);
  min-width: var(--ck-character-grid-tile-size);
  min-height: var(--ck-character-grid-tile-size);
  border: 0;
  padding: 0;
  overflow: hidden;
  outline: 1px solid black;
}

<div class="wrapper">
  <div class="grid">
    <button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button>
  </div>  
</div>

Answer 1

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/

Answer 2

That's just how things are, but you can use JS to calculate the width of the scrollbar and add that as a padding. You can use this answer:

Prevent scroll-bar from adding-up to the Width of page on Chrome

I replaced margin with padding:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({paddingRight:'-'+scrollw+'px'});
    }
}