CSS网格内的flexbox的跨浏览器图像高度问题答案

【问题标题】：Cross-browser image height issue with flexbox inside CSS gridCSS网格内的flexbox的跨浏览器图像高度问题
【发布时间】：2019-10-03 03:51:10
【问题描述】：

我有一个包装容器设置为 display:grid 包含两列。一列包含响应图像，另一列包含文本。图像列设置为 display:flex 以便图像填充由旁边的网格项确定的列的整个高度。

这在 Firefox 中效果很好：

但在 Chrome 中，图像以全高显示，而不是响应式：

如果我将显示更改为 -webkit-box，Chrome 会按预期运行...

...但它不应该使用 display:flex 按预期工作吗？

我在图像上尝试了各种宽度、最小宽度、高度、最小高度的组合，但似乎没有任何效果。我知道我可以使用背景图像来处理这个问题，但我真的很想使用实际图像。有什么想法吗？

【问题讨论】：

【解决方案1】：

该代码中有很多内容。

请务必注意，当父元素没有定义高度时，百分比高度在浏览器中是不可靠的（请参阅下面的链接）。

也就是说，在这种特殊情况下，将 height: 100% 添加到 img 元素 (.class-main-img) 似乎可以解决问题。

更多信息：

【讨论】：