CSS 网格内 flexbox 的跨浏览器图像高度问题
Cross-browser image height issue with flexbox inside CSS grid
我有一个包装容器设置为 display:grid，其中包含两列。一列包含响应图像，另一列包含文本。图像列设置为 display:flex，以便图像填充由旁边的网格项确定的列的整个高度。
这在 Firefox 中非常有效：
但在 Chrome 中，图像以全高显示而不是响应式：
如果我将显示更改为 -webkit-box，Chrome 会按预期运行...
...但是使用 display:flex 不应该按预期工作吗？
Link: http://uvmc.wpengine.com/play-sing-learn/classes
我在图像上尝试了宽度、最小宽度、高度、最小高度的各种组合，但似乎没有任何效果。我知道我可以使用背景图像来处理这个问题，但我真的很想使用实际图像。有什么想法吗？
该代码中发生了很多事情。
重要的是要注意，当父元素没有定义高度时，百分比高度在浏览器中是不可靠的（参见下面的链接）。
也就是说，在这种特殊情况下，将 height: 100% 添加到 img 元素 (.class-main-img) 似乎可以解决问题。
更多信息：
我有一个包装容器设置为 display:grid，其中包含两列。一列包含响应图像，另一列包含文本。图像列设置为 display:flex，以便图像填充由旁边的网格项确定的列的整个高度。
这在 Firefox 中非常有效：
但在 Chrome 中，图像以全高显示而不是响应式：
如果我将显示更改为 -webkit-box，Chrome 会按预期运行...
...但是使用 display:flex 不应该按预期工作吗？
Link: http://uvmc.wpengine.com/play-sing-learn/classes
我在图像上尝试了宽度、最小宽度、高度、最小高度的各种组合，但似乎没有任何效果。我知道我可以使用背景图像来处理这个问题，但我真的很想使用实际图像。有什么想法吗？
该代码中发生了很多事情。
重要的是要注意，当父元素没有定义高度时，百分比高度在浏览器中是不可靠的（参见下面的链接）。
也就是说，在这种特殊情况下，将 height: 100% 添加到 img 元素 (.class-main-img) 似乎可以解决问题。
更多信息：