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

Question

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

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

代码笔

.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 中的行为（正确）：

标签： cssvuejs2flexboxcss-gridvuetify.js