使水平滚动容器的内层div宽度匹配内部元素总宽度

这问题我之前做项目时也碰到过，核心原因是块级元素的默认宽度特性：.innerContainer作为块级元素，它的宽度只会默认适配父容器的可视区域，不会自动延伸到内部所有子元素的总宽度，所以滚动时边框就只能跟着可视区域走。

给你几个实用的解决方案，按需选择：

方案1：将内层容器设为inline-block #

让.innerContainer的宽度由内部子元素撑开，同时可选添加min-width:100%来兼容子元素总宽度小于父容器的场景：

.container {
  overflow-x: auto;
  white-space: nowrap;
  border: solid 1px green;
  padding: 20px;
}
.innerContainer {
  border-top: solid 1px red;
  display: inline-block;
  min-width: 100%; /* 可选：子元素总宽度不足时，边框仍占满父容器宽度 */
}
.innerContainer div {
  display: inline-block;
  width: 300px;
  height: 100px;
  margin-right: 20px;
  margin-top: 10px;
  border: solid 1px gray;
}

方案2：使用Flex布局（推荐） #

Flex布局是更现代的解决方案，能自动处理子元素排列和容器宽度延伸，还能通过gap统一控制子元素间距：

.container {
  overflow-x: auto;
  border: solid 1px green;
  padding: 20px;
  /* 移除white-space: nowrap，Flex布局不需要这个 */
}
.innerContainer {
  border-top: solid 1px red;
  display: flex;
  gap: 20px; /* 替代子元素的margin-right，避免最后一个元素多余间距 */
}
.innerContainer div {
  width: 300px;
  height: 100px;
  margin-top: 10px;
  border: solid 1px gray;
}

方案3：使用min-width: fit-content #

利用CSS的fit-content属性，让内层容器宽度自动适配内容总宽度，同时保持块级元素特性：

.container {
  overflow-x: auto;
  white-space: nowrap;
  border: solid 1px green;
  padding: 20px;
}
.innerContainer {
  border-top: solid 1px red;
  min-width: fit-content;
  width: 100%; /* 可选：子元素总宽度不足时，边框仍占满父容器宽度 */
}
.innerContainer div {
  display: inline-block;
  width: 300px;
  height: 100px;
  margin-right: 20px;
  margin-top: 10px;
  border: solid 1px gray;
}

这三个方案都能解决你的问题，个人更推荐Flex布局，它在响应式和布局灵活性上表现更好。

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