如何让横向滚动容器内的flex行宽度等于所有子单元格总宽度

纯CSS实现方案 #

你可以通过以下两种CSS方案实现需求，不需要借助JS：

方案1：使用fit-content宽度适配 #

核心是给行元素设置width: fit-content，让其宽度自动匹配所有子单元格的累计宽度，不受外层滚动容器可视区域限制，完整样式代码如下：

/* 外层滚动容器 */
.grand-parent {
  overflow-x: auto;
  /* 可按需设置容器的固定宽度/最大宽度 */
  width: 100%;
}
/* 行元素 */
.parent {
  display: flex;
  flex-wrap: nowrap;
  /* 核心：宽度随子元素总宽度自动适配 */
  width: fit-content;
  /* 兼容低版本Safari可加前缀 */
  width: -webkit-fit-content;
}
/* 单元格 */
.child {
  /* 你需要的固定宽度 */
  width: 200px;
  flex-shrink: 0; /* 防止单元格被压缩，保证固定宽度生效 */
  /* 其他自定义样式：边框、内边距等 */
  padding: 8px;
  border: 1px solid #eee;
}

方案2：使用inline-flex行内弹性容器 #

也可以直接将行元素的display属性设置为inline-flex，行内弹性容器默认会根据内容宽度自动撑开，不需要额外设置宽度属性：

/* 外层滚动容器样式和方案1一致 */
.grand-parent {
  overflow-x: auto;
  width: 100%;
}
/* 行元素 */
.parent {
  display: inline-flex;
  flex-wrap: nowrap;
}
/* 单元格样式和方案1一致 */
.child {
  width: 200px;
  flex-shrink: 0;
  padding: 8px;
  border: 1px solid #eee;
}

两种方案都可以保证行的宽度等于所有子单元格的累计宽度，外层容器超出可视区域时自动出现横向滚动条。

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