加了overflow-y: auto没滚动条，是因为内容未真正溢出：必须设置max-height（不能仅用min-height），且Flex子项需加min-height: 0，否则被默认min-height: auto锁死收缩底线。
为什么加了 overflow-y: auto 还没滚动条
不是 CSS 写错了，而是容器根本没“被超出”——浏览器只在「内容高度 > 容器约束高度」时才触发滚动逻辑。
常见原因：
- 容器没设
height或max-height（min-height不行） - 父级是
display: flex，但子项没加min-height: 0，被拉伸填满，永远不溢出 - 子元素用了
position: absolute，脱离文档流，溢出计算时被忽略 - macOS 下滚动条默认隐藏（仅悬停/滚动时淡入），先用触控板试试能否滚动
max-height: 400px + overflow-y: auto，比固定 height 更符合实际场景。
overflow-y: auto 和 overflow-y: scroll 怎么选
两者都启用纵向滚动，但行为差异直接影响体验：
-
overflow-y: auto：只在内容真正溢出时显示滚动条，视觉干净，移动端兼容性好 -
overflow-y: scroll：强制显示滚动条（含空轨道），适合需要视觉一致性的地方，比如固定高度的聊天面板；但在 macOS 上会常驻一条细线，显得突兀 - 如果容器高度靠内容撑开（没设
height/max-height），scroll也会失效——因为“溢出”无从判定 - 移动端 Safari 对
scroll的惯性滚动支持弱，必要时得补-webkit-overflow-scrolling: touch（已废弃但仍有影响）
局部滚动条样式怎么只改某一个容器
全局写 ::-webkit-scrollbar 会污染所有滚动条，必须绑定到具体容器：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- WebKit 浏览器（Chrome/Safari）：用带前缀的选择器，如
.chat-panel::-webkit-scrollbar，不能单独写伪元素 - 宽度建议 ≥6px，太小（如
2px）在 macOS 上会被系统强制撑开 -
::-webkit-scrollbar-thumb推荐加background-clip: content-box，否则圆角+边框容易错位 - Firefox 完全不认 WebKit 伪元素，得用标准属性：
scrollbar-width: thin+scrollbar-color: #666 #f0f0f0，且必须和overflow写在同一选择器里 - iOS Safari 不支持
::-webkit-scrollbar-thumb:hover，别依赖它做核心反馈
富文本或图片多的容器滚动失效怎么办
富文本里 <img>、<table>、长 URL 是滚动失效高频元凶，它们默认无视父容器约束：
- 所有
<img>必须加max-width: 100%+height: auto - 长单词或 URL：在容器上加
word-break: break-word或overflow-wrap: break-word -
<table>建议套一层<div style="overflow-x: auto">，或对table自身加display: block; min-width: max-content - 若容器在 Flex 布局中，必须额外加
min-height: 0，否则 Flex 会忽略max-height - iOS 下必须加
-webkit-overflow-scrolling: touch，否则拖完手一松就回弹
overflow-y: auto 真正生效的前提。立即学习“前端免费学习笔记（深入）”；
