overflow-y: auto生效的前提是容器有明确高度约束（如max-height），否则富文本会随内容撑开，无法触发溢出；需配合min-height: 0（flex场景）、max-width: 100%（图片）、word-break: break-word（长文本）及-webkit-overflow-scrolling: touch（ios兼容）。

overflow 生效的前提是容器有明确宽高约束，富文本内容（如 <div contenteditable> 或渲染后的 <code><div>）默认会随内容撑开，不设限就根本不会触发滚动。 <h3>为什么给富文本容器加 <code>overflow-y: auto 没反应

常见现象：写了 overflow-y: auto，但滚动条死活不出现，拖不动，或只在部分浏览器生效。

• 容器没设 height 或 max-height —— overflow 只在内容“越界”时才激活，无边界则无溢出
• 富文本内含 <img>、<table> 或长 URL，未加 <code>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> 要么套一层 <code>div 并设 overflow-x: auto，要么对 table 自身加 display: block; min-width: max-content;（同表格滚动方案）
• 长单词或 URL：在富文本容器上加 word-break: break-word; 或 overflow-wrap: break-word;，避免单个 token 撑开整行
• 代码块（<pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt;）建议加 &lt;code&gt;white-space: pre-wrap;&lt;/code&gt; + &lt;code&gt;overflow-x: auto;&lt;/code&gt;，既保留换行又支持横向滚动</pre>

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 看板，确认容器尺寸和内容实际占用宽度是否一致——很多问题，其实一眼就能看见。