局部滚动容器不出现滚动条的根本原因是未设置明确高度约束，需确保html/body设height:100%、外层容器有height/max-height、滚动区用max-height:100%和overflow-y:auto。
局部滚动容器死活不出现滚动条
根本不是 overflow-y: auto 写错了，而是容器压根没被“框住”——它需要明确的 height 或 max-height，且父级不能让它无限撑高。
常见错误包括：
- 只写
overflow-y: auto，但容器高度由内容撑开，没有上限 - 用
height: 100%却没追溯到有确定高度的祖先（比如html、body或 flex 容器） - 父容器用了
display: flex但没加overflow: hidden或显式高度，导致子项被拉伸或塌陷
可靠解法是确保高度链完整贯通：html 和 body 加 height: 100%；最外层容器用 height: 100dvh 或 max-height: calc(100vh - 80px)；滚动区自身设 overflow-y: auto 并配 max-height: 100%（非 height: 100%）。
Flex 布局中局部滚动突然失效
Flex 容器默认会“尽力撑满”，这是局部滚动最常翻车的场景。滚动容器的直接父级若为 display: flex，必须满足两个条件之一：
立即学习“前端免费学习笔记（深入）”；
- 该父级显式设
overflow: hidden或固定高度（如height: 400px） - 滚动容器自身不用
height: 100%，改用flex: 0 0 auto+max-height: 100%，或直接flex: 1（当父级是flex-direction: column时）
若滚动区在 flex-direction: column 的子项里，该子项还得加 align-self: stretch 或显式高度，否则 flex 会按内容收缩，overflow 失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
绝对定位元素内部滚动不工作
position: absolute 的元素脱离文档流，其子元素无法继承高度上下文。对子容器写 height: 100% 是无效的。
可行路径只有两条：
- 把绝对定位容器本身设为
display: flex; flex-direction: column，再让内容区用flex: 1; overflow-y: auto - 放弃
position: absolute，改用position: fixed或嵌套进已有 flex 布局中——后者更可控
若必须用 absolute，内容区高度只能靠 calc() 手动算，比如 height: calc(100vh - 120px)，不能依赖百分比。
Bootstrap 5 中 .card-body 滚动失效
在 .card 内给 .card-body 加 overflow-y: auto 后仍不滚动，大概率是以下三个条件没同时满足：
-
.card自身要有明确高度约束（如height: 500px或max-height: 500px） -
.card-body不能设height: 100%，而应设max-height: 100%+overflow-y: auto - 整个页面的
html、body要加overflow: hidden，否则滚动会“穿透”到全局
.h-100 类只是 height: 100% 的快捷写法，依然受父级高度限制，不能替代显式尺寸控制。
最容易被忽略的是：父容器的 padding 或 border 没配 box-sizing: border-box，导致 h-full 实际可用高度变小，内容刚溢出一点就触发滚动——看着像卡顿，其实是高度被吃掉了。
