CSS问题：绝对定位元素在滚动容器中的宽度失效问题

问题描述 #

在可调整大小的容器内使用绝对定位的虚拟化列表项（如react-window输出的元素）时，遇到水平滚动溢出内容时子元素无法保持100%宽度的问题——短内容的列表项仅占容器初始宽度，长内容项溢出后，滚动容器会出现空白区域，无法让所有列表项宽度与最宽元素保持一致，且无法取消绝对定位。

复现代码 #

CSS #

body {
    font-family: system-ui;
    background: #eee;
}
.menu-container {
    position: relative;
    width: 150px;
    height: 300px;
    border: 2px solid #999;
    overflow: auto;
    resize: horizontal; /* 可选，添加后容器可手动调整宽度 */
}
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: #FFEDD8;
}
.menu-item {
    display: flex;
    align-items: center;
    position: absolute;
    padding: 0 10px;
    left: 0;
    width: 100%;
    min-width: 100%;
    height: 25px;
    white-space: nowrap;
    border: 1px solid #76ABAE;
    background-color: #76ABAE;
    font-weight: bold;
}

HTML #

<div class="menu-container">
    <div class="wrapper">
        <div class="menu-item" style="top: 0">Home</div>
        <div class="menu-item" style="top: 30px">Movies</div>
        <div class="menu-item" style="top: 60px">Music</div>
        <div class="menu-item" style="top: 90px">Profile</div>
        <div class="menu-item" style="top: 120px">Contact Us</div>
        <div class="menu-item" style="top: 150px">There is some long content</div>
    </div>
</div>

CSS解决方案 #

只需修改.wrapper的宽度规则，让它自适应最宽子元素的宽度，同时保证最小宽度不小于容器宽度：

.wrapper {
    position: relative;
    width: max-content; /* 让宽度适应最宽子元素的内容 */
    min-width: 100%;    /* 内容较小时，保持容器宽度 */
    height: 100%;
    background: #FFEDD8;
}

同时可移除.menu-item中的min-width: 100%（可选，不影响最终效果）：

.menu-item {
    display: flex;
    align-items: center;
    position: absolute;
    padding: 0 10px;
    left: 0;
    width: 100%;
    height: 25px;
    white-space: nowrap;
    border: 1px solid #76ABAE;
    background-color: #76ABAE;
    font-weight: bold;
}

原理说明 #

• width: max-content 让.wrapper的宽度由内部最宽的元素内容决定，所有绝对定位的.menu-item设置width: 100%时，会继承这个宽度，实现所有列表项与最宽元素同宽。
• min-width: 100% 确保当所有列表项内容都短于容器宽度时，.wrapper仍占满容器，避免出现空白。
• 绝对定位元素的宽度计算依赖最近的非static定位父元素（即.wrapper），因此修改.wrapper的宽度规则就能间接控制所有列表项的宽度。

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