Chrome中CSS Grid min-content属性失效，图片高度异常问题

我太懂这个坑了——用grid-template-rows: min-content做两栏布局，Firefox里图片能完美跟文本栏等高，结果Chrome直接把图片拉到原始高度，完全不按预期来。

问题出在哪？ #

Chrome和Firefox对Grid行min-content的计算逻辑有差异：当图片直接作为Grid子项时，Chrome会优先取图片的固有高度作为参考，而不是遵循Grid行的高度限制；Firefox则会正确把Grid行高度限制应用到图片上。

靠谱的修复方法 #

给图片套一层容器div，让容器成为Grid的子项，然后在容器里控制图片的高度，这样Chrome就能乖乖跟着Grid行的min-content走了。

修改后的完整代码：

HTML

<div class="grid"> 
  <div class="img-wrapper">
    <img src="https://m.media-amazon.com/images/M/MV5BNjgwNjkwOWYtYmM3My00NzI1LTk5OGItYWY0OTMyZTY4OTg2XkEyXkFqcGdeQXVyODk4OTc3MTY@._V1_.jpg" alt=""> 
  </div>
  <div> 
    <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz.</p> 
    <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz.</p> 
  </div> 
</div>

CSS

.grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: min-content; 
  width: 1000px; 
  margin: 0 auto; 
} 
.img-wrapper {
  height: 100%; /* 让容器继承Grid行的高度 */
}
img { 
  width: 100%; 
  height: 100%; /* 图片填满容器 */
  object-fit: cover; /* 可选：保持图片比例，避免变形，不想裁剪的话用object-fit: contain */
}

其他可选方案 #

如果觉得套容器麻烦，也可以把图片设为Grid项的背景图：

.img-bg-item {
  background: url('图片地址') center/cover no-repeat;
}

不过语义化上还是用img标签加容器的方式更好。

亲测这个方法在Chrome和Firefox里都能完美实现图片和文本栏等高的效果，再也不用头疼浏览器差异啦。

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