Chrome 瘦 CSS 网格的神秘差距

Question

我注意到只有在 Chrome 中围绕 CSS 网格的一些奇怪行为。未指定行高时似乎计算错误。

简单示例：

.parent {
  display: grid;
  width: 300px;
  grid-template-columns: repeat(8, 9.81183%);
  justify-content: space-around;
}
.child:nth-of-type(odd) {
  border: 1px solid green;
  grid-column-start: 2;
  grid-column-end: 5;
}
.child:nth-of-type(even) {
  border: 1px solid green;
  grid-column-start: 5;
  grid-column-end: 8;
}

我的理解是这里使用的行高默认值是自动的，这意味着行应该采用最高网格项的高度。但在这个小提琴中，似乎有足够的空间让文本只换行比实际需要的多一行：https://jsfiddle.net/kessbethler/wve16ak5/4/

这似乎没什么大不了的，但是当使用带有长文本块的非常窄的布局时效果会变得很明显，就像您在移动设备上所做的那样。 Chrome 在这个网格容器下方显示了一个巨大的空白空间，而在 Firefox 中，它正是其内容的高度，就像你所期望的那样：https://jsfiddle.net/kessbethler/22bmjfnc/6/

有人见过吗？有解决办法吗？

Answer 1

问题的根源是容器上的justify-content: space-around。如果您删除它，Chrome 间隙就会消失。看起来像一个错误。