父容器滚动时，绝对定位元素导致子Div无法随内容扩展宽度

问题根源：绝对定位元素脱离正常文档流，不会参与父容器的内在宽度计算。父容器的横向滚动仅因元素溢出触发，但正常流的#normal设置width:100%时，只会匹配父容器的初始可视宽度，无法覆盖整个滚动区域。

方案1：纯CSS适配（固定位置场景） #

通过给父容器添加伪元素撑开内在宽度，让#normal的100%宽度覆盖滚动范围：

#container {
    overflow-x: scroll;
    position: relative;
    height: 200px;
    min-width: 100%; /* 保证至少占满视口宽度 */
    display: inline-block; /* 让父容器宽度由内容撑开 */
}

/* 伪元素宽度等于绝对元素的left值+自身宽度，撑开父容器 */
#container::after {
    content: '';
    display: block;
    width: calc(1500px + 20px);
    height: 0;
    visibility: hidden;
}

#absolute {
    position: absolute;
    left: 1500px;
    background-color: red;
    width: 20px;
    height: 20px;
}

#normal {
    width: 100%;
    background-color: blue;
    height: 20px;
}

方案2：JavaScript动态适配（灵活场景） #

如果绝对元素的位置或宽度是动态变化的，用JS同步父容器的滚动宽度到#normal：

#container {
    overflow-x: scroll;
    position: relative;
    height: 200px;
}

#absolute {
    position: absolute;
    left: 1500px;
    background-color: red;
    width: 20px;
    height: 20px;
}

#normal {
    background-color: blue;
    height: 20px;
}

function syncNormalWidth() {
    const container = document.getElementById('container');
    const normal = document.getElementById('normal');
    normal.style.width = container.scrollWidth + 'px';
}

// 页面加载时执行
window.addEventListener('load', syncNormalWidth);

// 若绝对元素位置动态修改，需在修改后重新调用syncNormalWidth()

HTML结构保持不变：

<div id="container">
   <div id="absolute"></div>
   <div id="normal"></div>
</div>

内容的提问来源于stack exchange，提问作者Fernando Muñoz