如何让child1适配设置overflow:auto的父div的非滚动宽度？

这个需求确实有点 tricky，纯 CSS 没法直接搞定，得结合 JavaScript 来精准适配父元素的可视区域宽度（也就是你说的无需滚动就能看到的那部分宽度）。我给你整理了一套完整的方案，包括动态适配父元素尺寸变化的情况：

核心思路 #

父元素的 clientWidth 属性正好对应它去掉滚动条后的可视区域宽度——比如父元素总宽500px，滚动条占了100px，那clientWidth就是400px，完全符合你的需求。我们要做的就是把这个值实时同步给child1，还要监听父元素的尺寸变化，确保动态调整。

完整代码示例 #

HTML 结构 #

<div class="parent">
  <div class="child1">我会自动适配父元素的可视区域宽度</div>
  <div class="child2">我是超长内容，用来撑开父元素触发滚动条 我是超长内容，用来撑开父元素触发滚动条 我是超长内容，用来撑开父元素触发滚动条</div>
</div>

CSS 基础样式 #

.parent {
  overflow: auto;
  border: 1px solid #ddd;
  /* 父元素宽度动态变化，这里只是初始演示值 */
  width: 500px;
}
.child2 {
  /* 故意设宽来撑开父元素，触发滚动条 */
  width: 800px;
  background-color: #f5f5f5;
  padding: 10px;
}
.child1 {
  background-color: #e6f2ff;
  padding: 10px;
}

JavaScript 适配逻辑 #

const parentEl = document.querySelector('.parent');
const child1El = document.querySelector('.child1');

// 定义调整宽度的函数
function setChild1FitWidth() {
  // 把父元素的可视宽度赋值给child1
  child1El.style.width = `${parentEl.clientWidth}px`;
}

// 页面加载时先执行一次
setChild1FitWidth();

// 用ResizeObserver监听父元素的尺寸变化，实时调整
const resizeObserver = new ResizeObserver(setChild1FitWidth);
resizeObserver.observe(parentEl);

关键细节说明 #

1. 为什么用clientWidth？
   这个属性会自动排除滚动条的宽度，只返回元素内部可显示内容的宽度，完全匹配你要的“非滚动区域”尺寸。
2. 动态适配的保障
   使用ResizeObserver比监听window.resize更精准——不管是窗口大小改变，还是父元素被其他JS代码修改了宽度，它都能立刻触发调整，完美适配父元素动态变化的场景。
3. 纯CSS的局限
   目前CSS没有原生属性能直接获取元素的可视区域宽度，所以没法仅用CSS实现这个动态需求，JS是必要的补充。

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