Html 为什么css网格中的最后一行元素会被替换？

我正在测试滚动捕捉，我注意到我的网格有点问题

*{
保证金：0；
}
.电网{
显示：网格；
网格模板列：重复（10，计算（（100vw-2rem）/3-（（100vw-100%）/3））；
网格模板行：重复（10，计算（（90vh）-（90vh-100%））；
网格间距：1rem；
列表样式：无；
填充：1rem；
保证金：0；
高度：90vh；
溢出：滚动；
滚动捕捉类型：两者均为必填项；
滚动填充：1rem；
}
.卡片{
滚动捕捉对齐：开始；
边界半径：3px；
背景：红色；
}

找到了一个解决方案，尽管不是非常优雅

.child:after {
    content: "";
    display: block;
    position: absolute;
    right: -2rem;
    width: 2rem;
    height: 1px;
}

在溢出容器中，填充和边距似乎被忽略，因此要在溢出容器的右侧和底部添加边距或边距，必须使用浏览器无法忽略的伪元素对其进行模拟

---

来源：

可能相关：没有任何非黑客解决方案能够从该解决方案中工作。谢谢你