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

Question

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

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

我想要的是在所有浏览器中都有相同的行为（就像在Chrome中一样）。我怎么拿到这个？

css lang-css prettyprint-override">: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技巧文章《防止网格井喷》，这个问题与网格的大小有关：

真正的解决办法并不那么困难--我们只需要了解正在发生的事情。我不能保证我解释这个100%准确，但我理解它的方式，网格列的最小宽度是自动的。[……]

要应用我们的修复，我们需要确保列有一个确定的最小宽度，而不是auto。

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

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