overflow-y: auto 不生效的主因是父容器未设 overflow-hidden 截断高度传播链，导致 h-full 失效；需在直接包裹滚动区的最近容器上加 overflow-hidden 锚定高度，再配合 flex-1 和 h-full 使用。
overflow-y: auto 不生效？先确认父容器是否 overflow: hidden
嵌套滚动失效最常见原因：子容器设了 overflow-y: auto，但内容仍撑开整个页面、不出现滚动条。根本不是 CSS 写错了，而是父级没“截断”高度传播链。浏览器默认让子元素自由撑高，height: 100% 或 h-full 在无约束父容器下等于无效。
必须在**直接包裹滚动区域的最近弹性/流式容器**上加 overflow: hidden（Tailwind 对应 overflow-hidden）。它不负责滚动，只起“尺寸锚定”作用——把高度计算边界锁死在视口或指定容器内，后续的 h-full 才有据可依。
- 错误写法：
<div class="h-screen"><main><div class="h-full overflow-y-auto">...</div></main></div>（<main></main>缺失overflow-hidden，h-full失效） - 正确写法：
<div class="h-screen flex flex-col overflow-hidden"> <header>...</header><main class="flex-1 overflow-hidden"><div class="h-full overflow-y-auto">...</div></main> </div> - 注意：
overflow-hidden不能加在或全局 wrapper 上，否则会意外裁剪其他浮动/定位元素
滚动容器高度继承失败？检查 padding/margin 和 min-height 干扰
h-full 要生效，依赖一条干净的高度传递链：父容器有明确高度 → 子容器用 h-full 或 flex-1 继承 → 滚动内容区再用 h-full 占满。任意一环被 padding、margin、min-height 或 border 破坏，都会导致子容器实际高度 > 父容器可用空间，从而溢出并禁用滚动。
- Tailwind 中慎用
p-4、mt-6等直接作用于滚动容器父级的间距类；改用内层 padding 或gap（如flex flex-col gap-4） - 避免给滚动容器父级设
min-height: fit-content或min-height: max-content，它们会覆盖flex-1的伸缩行为 - 用浏览器 DevTools 的 Layout 面板检查“Computed Height”，确认滚动容器的
height是否真的等于父容器剩余空间
iframe 嵌套时内部滚动卡顿？优先禁用外层滚动穿透
当 <iframe></iframe> 放在可滚动区域里，用户在 iframe 内滑动到底部再继续拖拽，常触发外层页面滚动（即“滚动链”）。这不是 bug，是浏览器默认行为，但体验极差。
纯 CSS 方案有限，推荐在 iframe 加载后注入样式：
iframe {
/* 防止 iframe 内容触发外层滚动 */
touch-action: pan-y;
}
若需更彻底控制（如禁用所有方向穿透），可用 JavaScript 监听 iframe 的 scroll 事件并 preventDefault()，但要注意跨域限制 —— 只能监听同源 iframe。
- 跨域 iframe 无法监听其内部 scroll，只能靠
touch-action+ 合理设置height减少误触 - 移动端 Safari 对
touch-action支持较晚，iOS 13+ 才稳定，旧版本需降级为pointer-events: none配合遮罩层（慎用，影响交互） - 不要用
iframe { overflow: hidden }，它只裁剪 iframe 自身边框，不阻止滚动事件冒泡
嵌套水平滚动时 sticky 标题错位？关键在父容器宽度响应
水平滚动区域中，position: sticky; left: 0 的标题不随内容滚动“粘住”，通常不是 sticky 写错了，而是它的父容器宽度没随内部宽内容自动扩展。浏览器认为父容器只有视口宽，sticky 的“粘性范围”就被限制在这个窄区域内。
解决方式分两步：
- 确保滚动容器父级使用
white-space: nowrap或display: inline-flex，让子项不换行、强制横向延展 - 滚动容器本身设
overflow-x: auto且 **不设固定 width**（如w-full），让它由内容撑开；必要时用min-width: max-content - sticky 元素必须是该父容器的直系子元素，不能隔一层
div包裹，否则粘性上下文失效
复杂点在于：当嵌套多层水平滚动（如表格列头 + 表格体），每一层 sticky 都要独立满足“父容器宽度响应内容”这个前提，漏一层就全崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
