为何图片超出grid容器？设置max-height:400px后子元素仍越界

问题 #

给Grid容器设置max-height: 400px，期望子元素能随父容器高度自动拉伸，但实际子元素超出了容器边界。

示例代码 #

HTML #

<div class="grid">
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
  </div>

CSS #

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  outline: 2px solid royalblue;
  max-height: 400px;
}

.grid__col {
  height: 100%;  
}

.grid__col:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.grid__col:last-child {
   grid-column: 3 / -1;
 }

.grid__col img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

原因分析 #

Grid布局默认会根据子元素的内容尺寸计算行高，仅设置max-height无法强制Grid自动压缩行高以适配容器高度。尤其是存在跨行元素（如第二个子元素grid-row: 1 / 3）时，Grid会优先满足跨行元素的内容空间需求，导致整体高度突破max-height限制。

解决方案 #

给Grid容器添加明确的行高分配，同时确保容器高度约束生效：

修改.grid的CSS：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 明确设置两行平分容器高度 */
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  outline: 2px solid royalblue;
  /* 添加height确保max-height生效 */
  height: 100%;
  max-height: 400px;
}

解释 #

1. grid-template-rows: repeat(2, 1fr)：让Grid的两行平均分配容器可用高度，确保跨行元素的高度被限制在两行的总高度内。
2. height: 100%：配合max-height，让容器的高度约束能传递给内部的Grid行，避免Grid忽略max-height而根据内容计算高度。

修改后，所有子元素会自动适配容器的max-height: 400px，不会再超出边界。

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