如何实现仅垂直滚动、子元素自动换行无横向滚动的固定尺寸滚动框

修复方案 #

核心问题原因

1. 原生<pre>标签默认white-space: pre属性不会自动折行，配合你设置的overflow-x: auto会直接触发横向滚动条
2. 滚动容器.Holder未做横向溢出隐藏、纵向滚动的配置，也未限制宽度继承父级
3. 未对容器内所有元素做全局宽度限制、强制断行配置，长链接、大图片等元素容易撑宽容器

修改后的完整代码

HTML代码（可选优化：如果传入的${html}是需要渲染的富文本而非代码片段，建议将<pre>替换为普通<div class="content">避免默认预格式化样式干扰）

<div class="col-md-10">
    <div class="Holder">
        <pre>
            ${html}
        </pre>
    </div>
</div>

CSS代码

/* 全局盒模型适配，避免内边距、边框撑宽元素，Bootstrap3已默认配置可省略 */
* {
    box-sizing: border-box;
}
p{
    overflow-wrap: break-word;
    word-break: break-word;
}
pre{
    /* 关闭横向滚动 */
    overflow-x: hidden;
    border:0;
    background-color:transparent;
    /* 保留原有换行格式的同时支持自动折行 */
    white-space: pre-wrap;
    /* 强制长文本、长链接断行 */
    word-break: break-all;
    overflow-wrap: break-word;
    width: 100%;
}
.Holder{
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    /* 继承父级col-md-10的宽度 */
    width: 100%;
    /* 完全禁用横向滚动，仅保留纵向滚动 */
    overflow-x: hidden;
    overflow-y: auto;
}
/* 容器内所有元素最大宽度不超过容器宽度 */
.Holder * {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}
/* 单独适配图片，避免图片超宽且保持比例 */
.Holder img {
    height: auto;
    display: block;
}

效果验证

修改后容器会完全继承父级col-md-10的宽度，所有超出右侧边界的文本、行内元素都会自动折行，图片会自动缩放适配容器宽度，不会出现横向滚动条，仅在内容高度超出容器固定高度时显示纵向滚动条，完全匹配需求。

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