给容器设固定尺寸+overflow: auto实现局部滚动，本质是让该区域独立处理溢出而不影响父级；需设明确宽高（非height:100%）、用flex:1+min-height:0更鲁棒，配合box-sizing:border-box和overlay滚动条优化体验。
给容器设固定尺寸 + overflow: auto
局部滚动的本质，就是让某个区域「自己管自己的滚动」，不把溢出传给父级或 body。最直接的做法是：给目标 div 设定明确的 width 和 height（或 max-height），再加 overflow: auto 或 overflow-y: auto。
注意不是 overflow: scroll——后者会强制显示滚动条（哪怕内容没溢出），既占空间又干扰视觉；auto 是按需触发，更干净。
- 高度必须可计算：用
px、vh、calc()都行，但不能依赖height: 100%（它需要父级有明确高度，容易断链） - 如果容器本身是 flex 子项，优先用
flex: 1+min-height: 0配合overflow，否则 flex 项可能不收缩 - 避免在该容器上设
position: absolute或float，否则脱离文档流后高度坍塌，父容器无法感知内容实际大小
用 flex 布局自动分配剩余空间
当页面顶部有固定 header、底部有 footer，中间区域要填满且支持内部滚动时，flex 比传统 height 计算更鲁棒。关键在父容器设 display: flex; flex-direction: column，然后让内容区用 flex: 1 吸收剩余空间。
这个 flex: 1 不是“占满 100%”，而是「尽可能拉伸，但不超过父容器可用空间」，所以即使内容超长，也只在本区域内滚动，不会撑破整体布局。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 显隐切换上层模块（如
display: none）时，flex: 1区域会自动重分配高度，无需 JS 重算 - 必须给父容器设明确高度（如
height: 100vh或calc(100vh - 60px)），否则 flex 无参照 - 内容区自身要加
overflow-y: auto，否则超长内容会把 flex 容器撑开，导致整页出现外层滚动条
滚动条样式干扰布局？用 overlay 模式
默认滚动条会占用容器内边距空间（比如 17px 宽），导致内容区实际可用宽度变小，尤其在窄容器里容易触发意外换行或截断。Chrome/Edge 支持 scrollbar-gutter: stable both-edges，但兼容性有限；更通用的解法是启用 overlay 滚动条。
WebKit 内核（Safari、旧版 Chrome）可通过伪元素隐藏滚动条轨道，仅保留滑块；而现代 Chromium 已默认使用 overlay 滚动条（不占空间），但需确认是否被 CSS 强制覆盖。
- 禁用默认滚动条轨道：
::-webkit-scrollbar { width: 0; }，配合overflow: auto即可实现「有内容才滑，无内容不占位」 - 不要用
overflow: overlay（不存在该值），这是常见误解；overlay 是渲染行为，不是 CSS 属性 - 若需自定义滚动条颜色或宽度，只能用
::-webkit-scrollbar系列伪类，Firefox 不支持，得另配 JS 方案
移动端触摸滚动卡顿？检查 transform 和 will-change
在 iOS Safari 或 Android Chrome 上，局部滚动区域偶尔会「拖不动」「跳帧」，尤其是嵌套了 transform 动画或复杂背景的容器。根本原因是浏览器未将该区域提升为独立合成层，滚动时频繁重绘。
加 will-change: scroll-position 可提示浏览器提前优化，但别滥用——每个都加反而增加内存开销。
- 仅对高频滚动区域（如列表、表格容器）加
will-change，静态内容区不需要 - 避免在滚动容器上同时设
transform: translateZ(0)和will-change，二者效果重复，且后者优先级更高 - 如果用了
position: sticky头部，确保它不在局部滚动容器内部，否则 sticky 行为会被截断
真正容易被忽略的是：局部滚动容器的 box-sizing。默认 content-box 下，你设的 height: 400px 不包含 padding 和 border，结果内容区实际高度只剩 390px，滚动可能提前触发。统一设成 box-sizing: border-box 才能所见即所得。
