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

Question

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

• 网格的模板行高度设置为自动
• 单元格内的容器使用flexbox来最大化内容

CodePen

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

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

• 悬停后，行高不会再次缩小
• 更改单元格的某些样式（例如，在chrome dev-tools中）后，布局已固定。 （正在重新布置）
• 在某些情况下，每次悬停时，物品/行会进一步增长

看起来它至少可以在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中的行为（正确）：