局部滚动容器必须有明确高度约束才能触发滚动上下文，如height或max-height；flex布局中需设min-height: 0防止默认min-height:auto阻止滚动；动态高度应依赖布局上下文而非内容撑开。
局部滚动容器必须有明确高度约束才能触发滚动上下文
没有 height 或 max-height 的 div 即使写了 overflow-y: auto 也不会滚动——浏览器根本不知道“哪里算溢出”。scrollTop 永远是 0，滚动条也不出现。常见错误是只写 height: 100%，但父级没设高度，结果计算为 0px。
动态高度不是指“让容器随内容自适应”，而是指：容器自身高度由布局上下文动态决定（比如 flex 剩余空间、视口减去头尾），同时仍满足「可滚动」的硬条件。关键在于提供一个**可计算、非依赖内容撑开**的高度来源。
-
height: calc(100vh - 120px)：适合固定 header/footer 的页面，减去它们的实际像素高度 -
max-height: 70vh：内容少时收缩，多时才滚动；比height更灵活，推荐优先用 -
flex: 1+min-height: 0：当父容器是display: flex; flex-direction: column时生效，min-height: 0是防止 flex item 默认最小高度干扰滚动的关键 - 避免
min-height单独使用——它不定义滚动边界，无法产生scrollHeight > clientHeight
Flex 布局中 .content 滚动失效的典型原因
在 display: flex; flex-direction: column 容器里，.content 设了 flex: 1 和 overflow-y: auto 却滚不动，大概率是漏了 min-height: 0。
因为 flex item 默认 min-height: auto，会阻止自身被压缩，导致即使内容超长，容器也优先撑高而不是触发滚动。这不是 bug，是 flex 的默认行为。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须给
.content加min-height: 0（或min-height: 1px） -
.header建议加flex-shrink: 0，防被压缩变形 - 整个 flex 容器（如
.block）要设明确高度，比如height: 400px或max-height: 60vh，否则flex: 1无参照 - 不要给外层容器设
overflow: hidden，它会直接禁掉子元素的滚动能力
动态 header 下如何让 .content 自动占满剩余空间
header 高度不确定（比如多行文本、响应式字号变化），又不想用 position: absolute 或硬编码像素值？纯 CSS 可解，靠 flex 布局+语义化约束。
核心思路是：让 header 自然流式撑开，content 不抢高度也不被撑开，而是「拿走所有剩下的」并启用滚动。
-
.block { display: flex; flex-direction: column; height: 500px; }—— 外层必须有确定高度 -
.header { flex-shrink: 0; }—— 确保 header 不被压缩，高度完全由内容决定 -
.content { flex: 1; overflow-y: auto; min-height: 0; }——min-height: 0是成败关键 - 如果
.content内部用了display: contents或visibility: hidden，会导致scrollHeight计算异常，滚动条消失
JavaScript 控制滚动位置时容易忽略的校验点
调用 container.scrollTo({ top: 0 }) 或设置 scrollTop = 0 却没反应？不是 API 写错了，而是滚动前提不成立。
必须在执行前确认三件事：clientHeight、scrollHeight 已就绪，且 scrollHeight > clientHeight。否则 scrollTop 强制设为 0 也会被浏览器重置。
- 确保 DOM 渲染完成再读取尺寸，比如在
requestAnimationFrame或setTimeout(..., 0)中操作 - 避免在 scroll 回调里频繁读写
offsetHeight等，会触发强制同步重排，卡顿且不准 - 用
container.scrollTo({ top: Math.min(value, container.scrollHeight - container.clientHeight) })比直接赋值scrollTop更安全 - 移动端 iOS Safari 对
scroll-behavior: smooth支持不稳定，必要时降级为behavior: 'auto'
真正容易被忽略的是：overflow-y: auto 是否生效，和内部子元素的 display 类型强相关——比如用了 display: contents 或 visibility: hidden，会导致 scrollHeight 计算异常，此时即使写了 max-height 和 overflow-y: auto，滚动条也不会出现。
