如何限制包含大图片的div.card的最大高度？

我有一个包含多个.card子元素的.container容器，需要限制.card的高度以避免内部大尺寸图片溢出。我将.container设置为网格容器，配置grid-auto-rows: minmax(auto, 200px)后，.card的尺寸确实被限制，但内部图片依然溢出——即便给图片设置了max-height: 100%。

这个效果在Firefox中符合预期，但Chromium浏览器表现异常；移除.card的display: grid属性后，Chromium显示正常，但我需要保留该属性，以便后续在.card内添加文本内容。请问这属于浏览器bug吗？

问题复现代码 #

HTML #

<div class="container">
    <div class="card">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fronalpstock_big.jpg/1200px-Fronalpstock_big.jpg">
    </div>
    <div class="card">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fronalpstock_big.jpg/1200px-Fronalpstock_big.jpg">
    </div>
</div>

CSS #

div.container {
    display: grid;
    grid-auto-rows: minmax(auto, 200px);
}

div.card {
    display: grid;
}

div.card > img {
    max-height: 100%;
}

浏览器表现差异 #

• Chromium显示结果：
  

• Firefox预期显示结果：
  

问题分析与解决方案 #

这并非严格意义上的浏览器bug，而是Chromium与Firefox对CSS网格规范中高度约束传递的解析差异。当.card作为嵌套网格容器时，Chromium没有正确将父容器（.container）的高度限制传递给内部图片，导致max-height: 100%无法生效。

可以通过以下两种方法解决：

1. 给.card显式设置height: 100%，强制高度约束传递到内部元素：

div.card {
    display: grid;
    height: 100%;
}

2. 配合width: 100%和object-fit属性优化图片显示（可选，保持图片比例同时填充容器）：

div.card > img {
    max-height: 100%;
    width: 100%;
    object-fit: cover;
}

内容的提问来源于stack exchange，提问作者Bino Manjesh