CSS 网格布局内的 Flexbox 具有动态内容

Question

我有一个网格布局，其中的单元格具有动态高度（显示鼠标悬停信息）。我希望网格根据内容的大小扩展行高，并在悬停结束后再次缩小行高。每个单元格中可以有多个项目，并且这些项目应始终完全填充单元格

• 网格的 template-row-height 设置为 auto
• cell内的容器使用flexbox来最大化内容

代码笔

.grid {
   display: grid;
   grid-template-columns: 150px 150px 150px 150px;
   grid-template-rows: auto auto auto;
   margin: 20px;
}

该问题在不同浏览器中看起来有所不同，但总是具有相同的症状。

• 悬停后行高不会再缩小
• 更改单元格的某些样式后（例如在 chrome 开发工具中），布局是固定的。（重新布局发生）
• 在某些情况下，项目/行会随着每次悬停而进一步增长

看起来它至少可以在 Chrome 72 和 Firefox 65.0.1 上正常工作，因此 Safari 是最后一个，但对于移动设备非常重要**

我已经尝试过的

• 我能找到的所有强制回流技巧（JS + CSS），因为我猜测只有回流没有触发
• 从子项中删除/添加各种样式，看看其中之一是否会强制子项在调整大小后保持该大小
• 从单元格中删除/添加元素以查看如何影响行为

起初它引起了 Safari 的大部分问题，我认为这可能是

Safari 尚不支持使用网格属性（例如 grid-template-rows）进行内部和外部大小调整（https://caniuse.com/#feat=css-grid）

然而，这些问题在 Chrome 中不应该出现，并且如果单元格内容没有 100% 高度，则扩展在 Safari 中也可以正常工作

我目前的猜测是，这可能只是相对较新的网格支持中的浏览器错误。因此，我也很感激解决方法的建议。

Safari 中的行为（错误）：

Chrome 中的行为（正确）：