如何使所有网格列高度等于最短列？超长列启用垂直滚动

Flex 布局方案 #

这种方案简洁直观，适配动态内容场景：

.flex-container {
  display: flex;
  gap: 1rem;
}
.flex-item {
  flex: 1; /* 让两列平分可用宽度 */
  height: 100%; /* 继承容器高度（由最短子项决定） */
}
.item1 {
  background-color: #00ffff;
}
.item2 {
  background-color: #ff00ff;
}
.item2-content {
  height: 100%;
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
}

<div class='flex-container'>
  <div class='flex-item item1'>
    <div class='item1-content'>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
  <div class='flex-item item2'>
    <div class='item2-content'>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
</div>

Grid 布局方案 #

如果偏好 Grid 布局，同样可以实现需求：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.grid-item {
  height: 100%; /* 填充容器高度（由最短子项决定） */
}
.item1 {
  background-color: #00ffff;
}
.item2 {
  background-color: #ff00ff;
}
.item2-content {
  height: 100%;
  overflow-y: auto;
}

<div class='grid-container'>
  <div class='grid-item item1'>
    <div class='item1-content'>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
  <div class='grid-item item2'>
    <div class='item2-content'>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
</div>

核心逻辑 #

1. 容器不设置固定高度，浏览器会自动将其高度计算为所有子项中最短的那个高度
2. 给每一列设置 height: 100%，强制它们填充容器的高度（也就是最短列的高度）
3. 给第二列的内容容器单独设置 height: 100% 和 overflow-y: auto，当内容高度超过列高时自动触发垂直滚动

这种方式完全适配动态加载的内容，不需要预先知道任何一列的高度。

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