带垂直滚动条的HTML容器宽度自适应内容实现方案

这不是代码写法错误，是浏览器默认渲染逻辑导致的必然表现：

• 容器设置overflow: auto时，垂直滚动条的插入发生在首轮布局计算完成之后：浏览器会先按照「不存在垂直滚动条」的可用水平宽度计算子元素布局，生成容器的自适应宽度；完成这步后才会检测内容高度是否溢出，若溢出则插入垂直滚动条。滚动条会占据容器内部15-17px的水平空间（具体数值随操作系统、浏览器、系统滚动条设置变化），但此时容器不会触发二次宽度重算，最终导致子元素可用宽度被挤压，出现非预期的文本截断。
• 目前没有原生CSS属性可以实现「垂直滚动条出现后自动扩展容器宽度补全滚动条占位」的效果，因为CSS布局阶段无法感知「垂直滚动条是否会被渲染」这个后置状态。

如果不想引入JavaScript，可以通过预留滚动条宽度的方式实现稳定效果，满足「无水平滚动条、空间充足时完整显示内容、空间不足时显示省略号」的要求，缺点是无论滚动条是否出现都会预留对应宽度：

.container
{
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    /* 固定垂直滚动条轨道始终渲染，避免内容增减时宽度跳变 */
    overflow-y: scroll;
    overflow-x: hidden;
    border: solid 1px black;
}
/* 定义滚动条宽度，Windows端默认取17px即可，macOS悬浮滚动条场景可通过媒体查询设为0 */
.container::-webkit-scrollbar {
    width: 17px;
}
.container > div
{
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 4px 7px;
}

针对macOS默认悬浮滚动条（不占据布局空间）的场景，该问题本身不会触发，可以通过@media查询针对不同系统调整滚动条预留值，避免多余留白。

如果需要完全匹配需求——仅当垂直滚动条出现时才扩展容器宽度、无滚动条时保持原生自适应宽度无多余留白，可以按以下逻辑实现：

宽度计算规则 #

需要额外补充的宽度值 = 容器offsetWidth属性值 - 容器clientWidth属性值

• 无垂直滚动条时，两个值相等，差值为0，无需调整宽度
• 出现垂直滚动条时，差值就是滚动条实际占据的水平宽度，直接给容器宽度叠加该值即可

触发时机 #

无需高频绑定事件，仅需在以下场景触发计算即可保证效果：

• 容器首次渲染完成时
• 容器内部子元素、文本内容变更时
• 容器自身尺寸、外部布局发生变化时（推荐使用ResizeObserver监听，性能远优于传统scroll、resize事件监听）

参考实现代码 #

无需改动原有CSS，直接加入以下脚本即可：

function adjustContainerWidth(container) {
    // 先重置宽度为初始自适应状态，避免多次调整导致宽度累加
    container.style.width = 'auto';
    // 计算当前滚动条占位宽度
    const scrollbarWidth = container.offsetWidth - container.clientWidth;
    if (scrollbarWidth > 0) {
        container.style.width = `calc(100% + ${scrollbarWidth}px)`;
    }
}

const container = document.querySelector('.container');
// 初始化时执行一次适配
adjustContainerWidth(container);
// 监听容器尺寸、内容变化自动适配
const resizeObserver = new ResizeObserver(() => adjustContainerWidth(container));
resizeObserver.observe(container);

// 若业务中有动态增删子元素、修改文本的场景，在内容更新完成后手动调用adjustContainerWidth(container)即可

该方案会自动适配不同环境下的滚动条实际宽度，无多余留白，全程不会出现水平滚动条，仅当水平空间确实不足以容纳内容时才会触发文本省略号效果。

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