父容器因动态内容横向溢出时，如何让子元素填满其宽度？

不需要用JavaScript，有几种纯CSS方法可以解决这个问题：

方法1：使用CSS Grid布局 #

给溢出容器添加display: grid属性，Grid容器会自动根据内部最宽的子元素计算自身实际宽度（包括溢出部分），此时子元素设置width: 100%就能填满整个滚动宽度。

修改后的CSS：

.overflowing-container {
  overflow-x: auto;
  display: grid; /* 新增属性 */
}

.unknown-width {
  width: 130%; /* 实际由内容决定，此处为示例 */
  background-color: yellow;
  padding: 20px;
}

.too-narrow {
  width: 100%;
  background-color: lightblue;
  padding: 20px;
}

方法2：利用inline-block让容器宽度由内容决定 #

把溢出容器设置为display: inline-block，同时加上min-width: 100%保证它至少占满视口宽度。这样容器实际宽度会跟随内部最宽的子元素，子元素的width: 100%就能覆盖整个滚动区域。

修改后的CSS：

.overflowing-container {
  overflow-x: auto;
  display: inline-block; /* 新增属性 */
  min-width: 100%; /* 保证至少占满视口 */
}

.unknown-width {
  width: 130%;
  background-color: yellow;
  padding: 20px;
}

.too-narrow {
  width: 100%;
  background-color: lightblue;
  padding: 20px;
}

方法3：给目标元素设置width: fit-content + min-width: 100% #

直接调整需要填满宽度的子元素，让它的宽度自适应内容的同时至少占满视口宽度，这样父容器滚动时，它会自动延伸到最宽位置：

.too-narrow {
  width: fit-content;
  min-width: 100%;
  background-color: lightblue;
  padding: 20px;
}

以上三种方法都不需要JavaScript，纯CSS即可解决问题。

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