overflow: auto 不生效最常见原因是容器未设 height 或 max-height，或父级高度链断裂；table 上直接写 overflow 无效，需用 div 包裹 tbody 并设 max-height 和 overflow-y: auto。
为什么 overflow: auto 在局部容器里不生效
最常见的情况是：写了 overflow: auto，但滚动条压根没出现。根本原因不是 CSS 写错了，而是容器没“被限制住”——height 或 max-height 缺失，或父级高度链断裂。
浏览器只在内容尺寸**明确超出容器设定尺寸**时才触发滚动。如果容器高度由内容撑开（比如没设 height、max-height，或父级是 min-h-screen 而没配 min-h-0），那它永远“不溢出”，overflow 就是摆设。
- 给容器加
height: 200px或max-height: 300px是硬性前提 - 若用 Flex 布局，子容器需加
min-h-0（对应 CSSmin-height: 0）才能收缩响应max-height - 避免对同一元素同时写
flex和grid类，display 属性会冲突，导致高度计算失效
table 元素上直接写 overflow-y: auto 为什么无效
<table> 是表格格式化上下文，原生无视 <code>overflow。哪怕你加了 overflow-y: auto，浏览器也当它不存在——它会优先按内容撑宽撑高，不会裁剪也不会滚动。
正确做法是把可滚动区域“抽出来”，用 <div> 包裹 <code><tbody>，再对这个 <code><div> 设置滚动：
<ul><li>外层 <code><div class="tbody-wrapper"> 设 <code>max-height: 200px + overflow-y: auto
<tbody> 显式设 <code>display: table-row-group，否则会被当普通块级元素拉伸变形
<thead> 必须和 <code><div> 同级，不能包在里面，否则表头也会跟着滚走
<li>移动端卡顿？加 <code>-webkit-overflow-scrolling: touch（iOS 仍有效，尽管已废弃）横向滚动文字必须满足的四个 CSS 条件
想让一长串文字水平滚动，光写 overflow-x: auto 不够。关键不是“加滚动”，而是“制造溢出”。缺一不可：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 容器设固定宽度：
width: 300px或max-width: 100% - 容器设
overflow-x: auto（别用scroll，空时也占空间） - 内部文字禁换行：
white-space: nowrap - 文字需脱离 inline 默认行为：
display: inline-block或包裹在<div> 中；否则基线对齐可能多出几像素，破坏溢出判断 <p>错误示例：<code><table style="overflow-x: auto"> —— 白写；正确结构是外层 <code><div style="overflow-x: auto; width: 100%; display: block;"><table style="display: block; min-width: max-content;">。 <h3>滚动条样式定制只在 WebKit 浏览器生效</h3> <p><code>::-webkit-scrollbar系列伪类（如::-webkit-scrollbar-thumb）仅在 Chrome、Edge、Safari 有效，Firefox 和旧版 IE 完全不识别。别指望它跨浏览器统一外观。如果你只控制垂直滚动，推荐组合使用：
-
overflow-y: scroll+overflow-x: hidden（避免误触横向拖拽） .container::-webkit-scrollbar { width: 8px; }.container::-webkit-scrollbar-track { background: #f5f5f5; }.container::-webkit-scrollbar-thumb { background: #999; border-radius: 4px; }
注意：自定义滚动条不改变滚动行为本身，只是皮肤。真正影响体验的是
scroll-behavior: smooth、scroll-snap-type这类属性，它们和滚动条样式无关，别混为一谈。 -
