column-count 与 overflow-y: auto 组合无效，因 column-count 不创建滚动上下文；需外层设固定高度+overflow-y: auto，内层设 column-count 且父级为 block/inline-block。

用 column-count + overflow-y: auto 组合不 work？原因在这

直接给多栏容器设 overflow-y: auto 通常没效果，因为 column-count 本身不创建滚动上下文——它只是把一段文本“视觉上”切成几列，DOM 还是线性流，滚动行为由父容器决定。你看到的“内容溢出”，其实是整个文本块高度超出了容器，但浏览器默认不会让它可滚动，除非你明确切断文档流并限制尺寸。

真正起作用的布局结构：外层固定高 + 内层 column-count + overflow-y: auto

必须满足三个条件才能让“多栏区域”自己滚动：

• 外层容器设固定高度（如 height: 400px），或用 calc() 动态计算（比如 height: calc(100vh - 120px)）
• 该容器设 overflow-y: auto（不能只写 overflow: auto，避免意外触发水平滚动）
• 内层文本容器（如 <div class="columns">）设 column-count: 3，且保持 display: block（别被父级 flex/grid 影响）

示例结构：

<div style="height: 400px; overflow-y: auto;">
  <div style="column-count: 3; column-gap: 2rem;">
    <p>长段落内容…</p>
    <p>更多内容…</p>
  </div>
</div>

移动端和 Safari 下 column-count 滚动失效？检查这几点

常见失效不是 bug，而是隐式约束被打破：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• column-count 在 iOS Safari 和旧版 Android WebView 中对 overflow 支持不稳定，优先加 -webkit-column-count 前缀
• 如果外层用了 display: flex 或 display: grid，column-count 直接被忽略——必须确保多栏容器的父级是 block 或 inline-block
• 内容里有 <img> 或 <iframe> 时，它们可能撑高容器导致滚动错位；加 break-inside: avoid 对图片无效，得用 max-height: 100% + object-fit 控制

想让每栏独立滚动？别用 column-count，改用 grid + overflow

column-count 是为文本流设计的，无法让“每栏”单独滚动。真要实现三栏各自滚动（比如聊天窗口+联系人列表+详情面板），必须换结构：

• 用 display: grid 划分三列区域，每栏一个子元素
• 每个子元素设固定高度（或 min-height）和 overflow-y: auto
• 避免在 grid 容器上设 overflow，否则整体会滚，而不是单栏滚

关键区别：这里滚动的是三个独立容器，不是一整段被切开的文本。