overflow-y: auto生效的前提是容器有明确高度约束（如max-height），否则富文本会随内容撑开，无法触发溢出；需配合min-height: 0（Flex场景）、max-width: 100%（图片）、word-break: break-word（长文本）及-webkit-overflow-scrolling: touch（iOS兼容）。
overflow 生效的前提是容器有明确宽高约束，富文本内容（如 <div contenteditable> 或渲染后的 <div>）默认会随内容撑开，不设限就根本不会触发滚动。
为什么给富文本容器加 overflow-y: auto 没反应
常见现象：写了 overflow-y: auto，但滚动条死活不出现，拖不动，或只在部分浏览器生效。
- 容器没设
height或max-height——overflow只在内容“越界”时才激活，无边界则无溢出 - 富文本内含
<img>、<table>或长 URL，未加max-width: 100%或word-break: break-word，导致内容横向撑破容器，反而让垂直方向“看起来没溢出” - 父级用了
display: flex或grid，但没给富文本容器设min-height: 0或overflow: hidden，Flex 会默认拉伸子项高度，压平溢出判定 - 用了
contenteditable且光标聚焦时，某些浏览器（如旧版 Safari）会临时重排，导致高度计算异常
max-height 和 height 选哪个？
优先用 max-height，它更符合富文本“高度不确定但需可控”的场景。
-
height: 300px：强制固定高度，内容少时留白，内容多时必滚动，但无法自适应；若配合 JS 动态调整高度，容易和用户编辑冲突 -
max-height: 300px：内容少时容器收缩，内容多时截断并滚动——这才是“局部滚动”的本意 - 若容器嵌套在 Flex 中，必须额外加
min-height: 0，否则 Flex 会忽略max-height并拉伸它
富文本里图片/表格/代码块怎么不撑破容器
这些元素是富文本滚动失效的高频元凶，它们默认无视父容器约束。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 所有
<img>必须加max-width: 100%; height: auto;，否则高分辨率图直接突破宽度 -
<table>要么套一层div并设overflow-x: auto，要么对table自身加display: block; min-width: max-content;（同表格滚动方案） - 长单词或 URL：在富文本容器上加
word-break: break-word;或overflow-wrap: break-word;，避免单个 token 撑开整行 - 代码块（
<pre><code>）建议加white-space: pre-wrap;+overflow-x: auto;，既保留换行又支持横向滚动
iOS 和 Chrome 滚动体验差异怎么填平
不是所有 overflow 都能惯性滚动，尤其在富文本这种频繁焦点切换的场景下。
- 必须加
-webkit-overflow-scrolling: touch;，否则 iOS Safari 拖完手一松就回弹，无法连续滑动 - 避免在富文本容器上同时设
overflow-x: auto和overflow-y: auto，某些 Android WebView 会因双轴判断混乱而禁用惯性 - 如果富文本支持编辑，别给容器设
pointer-events: none或过度使用transform，这会干扰原生滚动事件捕获 - 滚动卡顿？检查是否在容器上用了
filter、backdrop-filter或大量box-shadow，这些会触发全层重绘
真正难的不是加 overflow，而是确保富文本里的每个子元素都“认这个父容器的规矩”。一个没设 max-width 的图片，就能让整个滚动逻辑失效。动手前先打开 DevTools 的 Layout 看板，确认容器尺寸和内容实际占用宽度是否一致——很多问题，其实一眼就能看见。
