CSS网格呈现在Firefox和Safari中父级滚动条的后面

Question

我有一个绝对定位的面板（固定高度，overflow scroll）和一个带有正方形瓷砖的网格（10列）。在Chrome中，网格可以正确呈现：

但是在FF / Safari中，最后一列显示在包装器的滚动条后面，这很奇怪：

我想要的是所有浏览器（例如Chrome）中的相同行为。我怎么得到这个？

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

根据CSS Tricks 文章 Preventing a Grid Blowout，该问题与网格的大小有关：

\n\n

\n

真正的修复并不那么困难\xe2\x80\x94，我们只需要了解发生了什么。我不能保证我能 100% 准确地解释这一点，但根据我的理解，网格列的最小宽度是 auto。[\xe2\x80\xa6]

\n\n

要应用我们的修复，我们需要确保该列具有明确的最小宽度而不是自动宽度。

\n

\n\n

文章中提出的修复minmax似乎也适用于所讨论的情况：

\n\n

grid-template-columns: repeat( 10, minmax( 0, var(--ck-character-grid-tile-size) ) );\n

\n\n

使用单位的更简单的版本fr似乎也可以工作：

\n\n

grid-template-columns: repeat( 10, minmax( 0, 1fr ) );\n

\n\n

修复演示： https: //jsfiddle.net/gp8r0f94/

\n