如何用CSS设置非溢出元素撑满父元素宽度？

我明白你的需求：父容器设置了固定宽度和overflow: auto，其中一个子元素（child-1）宽度远大于父容器，导致父容器出现横向滚动条；而另一个子元素（child-2）默认只占父容器的可视宽度，你希望它能和父容器的滚动内容宽度（也就是child-1的宽度）保持一致。

先重现一下你的原始代码：

<style>
.parent { 
  width: 300px; 
  height: 100px; 
  background-color: lightblue; 
  overflow: auto; 
}
.parent .child-1 { 
  width: 800px; 
  background-color: lightgreen; 
}
.parent .child-2 { 
  background-color: lightyellow; 
}
</style>
<div class="parent">
  <div class="child-1">Overflowing DIV</div>
  <div class="child-2">Non Overflowing DIV</div>
</div>

下面是几种简单有效的实现方案：

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

给父容器添加display: flex和flex-direction: column，Flex布局会自动让垂直方向的子元素拉伸至容器的滚动内容宽度，完美匹配最宽子元素的尺寸：

<style>
.parent { 
  width: 300px; 
  height: 100px; 
  background-color: lightblue; 
  overflow: auto; 
  display: flex;
  flex-direction: column;
}
.parent .child-1 { 
  width: 800px; 
  background-color: lightgreen; 
}
.parent .child-2 { 
  background-color: lightyellow; 
}
</style>
<div class="parent">
  <div class="child-1">Overflowing DIV</div>
  <div class="child-2">Non Overflowing DIV</div>
</div>

原理：Flex容器在垂直主轴方向上，子元素的默认align-self为stretch，会让子元素宽度填充整个容器的可用宽度——这里的可用宽度就是由child-1撑开的滚动内容宽度。

方案二：使用Grid布局 #

同样，Grid布局也能自动让子元素匹配容器的内容宽度，只需给父容器添加display: grid即可：

<style>
.parent { 
  width: 300px; 
  height: 100px; 
  background-color: lightblue; 
  overflow: auto; 
  display: grid;
}
.parent .child-1 { 
  width: 800px; 
  background-color: lightgreen; 
}
.parent .child-2 { 
  background-color: lightyellow; 
}
</style>
<div class="parent">
  <div class="child-1">Overflowing DIV</div>
  <div class="child-2">Non Overflowing DIV</div>
</div>

原理：Grid容器的默认列宽是auto，会根据内容自动调整，子元素会默认占满整个列宽，而列宽由最宽的子元素（child-1）决定。

方案三：手动设置子元素宽度（兼容老浏览器） #

如果需要兼容不支持Flex/Grid的老浏览器，可以给child-2设置width: 100%，同时调整父容器的宽度规则，让它自适应内容的同时保留最小宽度：

<style>
.parent { 
  min-width: 300px; 
  width: fit-content;
  height: 100px; 
  background-color: lightblue; 
  overflow: auto; 
  display: inline-block;
}
.parent .child-1 { 
  width: 800px; 
  background-color: lightgreen; 
}
.parent .child-2 { 
  background-color: lightyellow; 
  width: 100%;
}
</style>
<div class="parent">
  <div class="child-1">Overflowing DIV</div>
  <div class="child-2">Non Overflowing DIV</div>
</div>

原理：width: fit-content让父容器宽度自适应最宽的子元素，min-width: 300px保证在内容较小时保持原有的宽度；child-2的width: 100%会继承父容器的自适应宽度，从而和child-1同宽。

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