如何实现子div撑满父容器宽度且父级保留垂直滚动效果

需求点 #

• 父容器内所有子div宽度自适应，同行元素共同填满父容器可用宽度
• 子元素垂直溢出父容器时，父容器支持垂直滚动
• 效果对标Zoom、Google Meets的视频画廊布局

纯CSS实现（推荐，无JS依赖） #

不需要手写JS计算宽度，直接用CSS Grid即可零成本实现，适配任意窗口尺寸变化，自动响应子元素增减。

完整代码 #

/* 先给父容器的祖先元素设置高度，保证height:100%能正常生效 */
html, body {
  height: 100%;
  margin: 0;
}

#parent {
  width: 100%;
  height: 100%;
  overflow-y: auto; /* 仅垂直方向溢出时显示滚动条 */
  box-sizing: border-box;
  /* 核心网格规则 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px; /* 统一设置子元素横纵间距，替代原有margin */
  padding: 10px; /* 可选：避免子元素贴容器边缘 */
}

.child {
  height: 200px;
  /* 无需手动设置width，网格会自动分配宽度撑满行 */
  background: #f0f0f0; /* 仅作演示用，可删除 */
}

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

核心规则说明 #

• repeat(auto-fill, minmax(200px, 1fr))会自动根据父容器宽度计算每行可容纳的子元素数量：每个子元素最小宽度200px，剩余空间按1fr（等分单位）平均分配给同行所有子元素，实现自动撑满宽度的效果
• gap属性直接控制元素间距，不会出现inline-block布局自带的空白间隙、最后一列margin溢出导致换行的问题
• 布局会在窗口尺寸变化、子元素增减时自动重算，不需要额外绑定resize事件监听

原有JS方案失效原因 #

原来的手写宽度计算逻辑存在几个硬伤，导致效果不符合预期：

• 仅在页面初始化时执行一次计算，窗口大小变化后不会重新适配
• 没有计算inline-block元素自带的文本空白间隙，宽度累加结果存在误差
• 循环判断逻辑存在边界错误，剩余空间分配、每行元素数计算不准确
• 没有覆盖子元素总数不足一行、子元素动态增减的场景

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