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

Question

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

这在Firefox中非常有用：

但是在Chrome浏览器中，图像显示为全高度，而不是响应速度：

如果我将显示更改为-webkit-box，则Chrome的行为将符合预期...

...但是使用display：flex不能正常工作吗？

链接：http://uvmc.wpengine.com/play-sing-learn/classes

我尝试了图像上宽度，最小宽度，高度，最小高度的各种组合，但似乎没有任何效果。我知道我可以使用背景图像代替它，但是我真的很想使用实际图像。有什么想法吗？

Answer 1

该代码中有很多事情。

请务必注意，当父元素未定义高度时，跨高度的浏览器是不可靠的（请参见下面的链接）。

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

更多信息：

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent