css - 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;
}

我的理解是这里使用的默认行高值是自动的，这意味着行应该采用最高网格元素的高度。但是在这个 fiddle 中，看起来好像有足够的空间让文本换行，比它实际需要的多一行:https://jsfiddle.net/kessbethler/wve16ak5/4/

这可能看起来没什么大不了的，但是当使用带有长文本 block 的非常窄的布局时，效果会变得很明显，就像您在移动设备上所做的那样。 Chrome 在此网格容器下方显示了一个巨大的空白区域，而在 Firefox 中，它恰好是其内容的高度，如您所料:https://jsfiddle.net/kessbethler/22bmjfnc/6/

有没有人见过这个？有解决方法吗？

Answer 1

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