如何让文本在div列内显示并添加垂直滚动条？

你的问题核心出在两点：滚动容器没包裹目标文本，以及滚动容器缺少高度限制，调整这两处就能解决问题：

1. 修正HTML结构 #

把右侧列里的长文本全部放到带.scroll类的容器里，不然滚动条根本作用不到文本上：

<div class="column right" style="background-color: #7d4d4d">
    <h2 class="section-three-title">Column 3</h2>
    <div class="scroll">
        <p>Some text..</p>
        <p class="left-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
</div>

2. 调整CSS样式 #

给.scroll容器设置高度（要减去标题的占位高度，避免超出父容器），同时优化滚动逻辑：

.scroll {
    /* 父容器column高500px，预留标题和内边距的空间 */
    height: calc(100% - 50px);
    overflow-y: auto; /* 内容超出时才显示垂直滚动条 */
    overflow-x: hidden; /* 彻底禁用水平滚动 */
    padding-right: 5px; /* 避免滚动条和文本挤在一起 */
}

/* 补充：给所有column添加盒模型属性，防止padding撑宽容器 */
.column {
    float: left;
    color: black;
    padding: 5px;
    min-width: 5px;
    min-height: 500px;
    max-height: 500px;
    box-sizing: border-box; /* 让padding算在容器宽度/高度内 */
}

问题根源说明 #

• 之前的.scroll容器是空的，文本在容器外，滚动条自然不起作用；
• 滚动容器没有高度限制，会跟着内容无限延伸，无法触发滚动；
• 用overflow-y:auto替代overflow:scroll，只会在需要时显示滚动条，体验更友好。

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