局部滚动容器高度不自适应的根本原因是父级缺乏明确高度基准，导致height:100%在任一中间层失效；必须确保html、body及滚动容器直接父元素均设可计算高度（如height:100vh或flex:1），滚动容器自身再设height:100%或flex:1并配合overflow-y:auto。
局部滚动容器为什么高度不自适应
常见现象是：给一个 div 设了 overflow-y: auto，但里面内容一多就撑破容器、出现双滚动条，或者干脆没滚动——根本原因是父级没提供明确高度基准，height: 100% 在中间任意一层失效，整个链路就断了。
关键不是“要不要加 height”，而是“谁该有 height”。浏览器只认显式声明的高度，html 和 body 默认不继承视口高，所有中间父容器（包括直接包裹滚动区的那个 div）都必须有可计算的高度来源。
-
html, body { height: 100%; margin: 0; }是起点，缺一不可 - 滚动容器的**直接父元素**必须有明确高度，比如
height: 60vh、min-height: 400px或flex: 1（在 Flex 容器中） - 滚动容器自身设
height: 100%才有效；若用max-height，则必须配合overflow-y: auto，否则内容被裁切 - 别对滚动容器设
display: inline-block或浮动，会破坏高度继承链
Flex 布局下怎么让局部滚动区填满剩余空间
这是最常用也最容易翻车的场景：顶部导航 + 中间可滚动内容 + 底部操作栏。想让中间区自动占满剩余高度并滚动，不能靠 height: 100% 硬算，得靠 Flex 的拉伸逻辑。
核心是三层结构必须连贯：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 外层容器设
display: flex; flex-direction: column; height: 100vh; - 顶部和底部用固定高度或
flex-shrink: 0锁住尺寸 - 中间滚动区设
flex: 1; overflow-y: auto;—— 注意这里不用写height，flex: 1已隐含“尽可能拉伸” - 如果中间区内部还有嵌套容器，确保它没写死
height，且不干扰overflow传递（比如子元素用了position: absolute就会脱离文档流，导致高度塌陷）
滚动容器内内容超长时如何防撑破
即使高度设对了，textarea、pre、长表格或未约束的图片仍可能把滚动区顶开，原因不是高度错，而是子元素默认“宁可撑破也不换行/缩放”。
必须在滚动容器内部加防护：
- 对文本类子元素统一加
word-break: break-word;（word-wrap: break-word已废弃，别用） - 图片加
max-width: 100%; height: auto;，避免宽图溢出 - 表格用
table-layout: fixed;+width: 100%，再给td设overflow: hidden; text-overflow: ellipsis; - 如果子元素用了
white-space: nowrap，记得配套overflow-x: auto，否则横向内容直接突破容器
移动端软键盘弹起时滚动区高度错乱怎么办
iOS 和 Android 软键盘会压缩视口高度，但不会触发 resize 事件的标准行为，导致原本设为 height: 100vh 的容器突然变矮，内容被遮挡或滚动失效。
不能只靠 CSS，得加 JS 补偿：
- 监听
focusin和blur事件，针对textarea或input触发时，临时把滚动容器高度改为calc(100vh - 200px)（200px 是估算键盘高度） - 更稳妥的是用
window.visualViewport?.height动态读取当前可视高度，然后更新容器style.height - 别依赖
scrollHeight或clientHeight来反推，它们在键盘弹起后可能滞后更新 - 测试时务必真机验证，模拟器常无法复现软键盘的真实视口变化
最易被忽略的是：滚动容器的父级是否真的“有高度”。很多问题表面是 JS 计算不准或 CSS 写错，实际根子在 html 或某层 div 漏掉了 height 声明——先查 computed height，再调代码。
