根本原因是WebKit浏览器的::-webkit-scrollbar伪元素不支持作用域隔离，全局生效且无法被class或层级限定，导致嵌套滚动条样式互相污染；同时flex项默认min-height: auto会阻止溢出判定，需显式设min-height: 0并约束高度。
为什么嵌套 div 的滚动条样式会互相污染
根本原因在于 WebKit 浏览器（Chrome/Safari/Edge）的 ::-webkit-scrollbar 伪元素不支持作用域隔离——它只认全局选择器，一旦你写了 .panel::-webkit-scrollbar，实际生效的是整个页面所有匹配该类名的滚动容器，甚至可能波及到 body 或其他未预期的 div。
更麻烦的是：父容器设置了 overflow: hidden，子容器又设了 overflow-y: auto，但父层的 scrollbar 样式规则仍会“漏下来”，导致子滚动条意外变粗、颜色错乱或完全消失。
- 不是 CSS 优先级问题，是伪元素本身无作用域
-
scrollbar-width和scrollbar-color（Firefox）虽支持局部设置，但仅对根滚动容器（html或直接div）有效，对嵌套内层无效 - 用
@supports包裹也拦不住，因为伪元素解析发生在样式计算阶段，不参与条件判断
用 class 隔离 + 层级限定是最稳的写法
放弃“内联 style 控制滚动条样式”的幻想。必须用外部或 <style> 块，并通过唯一 class + 明确层级关系收束作用范围：
.scrollable-panel {
overflow-y: auto;
height: 200px;
}
.scrollable-panel::-webkit-scrollbar {
width: 6px;
}
.scrollable-panel::-webkit-scrollbar-track {
background: #f5f5f5;
}
.scrollable-panel::-webkit-scrollbar-thumb {
background: #999;
border-radius: 3px;
}
/* 关键：加一层父容器 class 限定，防止穿透 */
.content-wrapper .scrollable-panel::-webkit-scrollbar-thumb {
background: #666;
}- 每个需要独立样式的滚动区域，必须分配**唯一 class**（如
table-scroll、log-viewer），不能共用.scrollable - 在 CSS 规则前加一个稳定父容器 class（如
.tab-content），形成.tab-content .table-scroll::-webkit-scrollbar，靠选择器权重压制全局规则 - Firefox 下要单独补
.scrollable-panel { scrollbar-width: thin; scrollbar-color: #666 #f5f5f5; }
flex/grid 容器里嵌套滚动 div 的高度陷阱
常见场景：外层 display: flex，中间一层 div，内层才是带 overflow-y: auto 的内容区——结果滚动条不出现，或只在内容超长时闪一下就消失。
立即学习“前端免费学习笔记（深入）”；
本质是 flex 项默认有 min-height: auto，阻止了容器收缩，导致子元素无法触发溢出判定。
- 必须给**直接父容器**（即 flex item）加
min-height: 0或height: 0 - 滚动容器自身需设
height或max-height，仅靠flex-grow: 1不够 - 错误示范：
<div class="flex"><div><div class="scrollable">...</div></div></div>→ 中间那层div是 flex item，但没设min-height: 0，滚动失效 - 正确写法：
<div class="flex"><div style="min-height: 0"><div class="scrollable">...</div></div></div>
隐藏滚动条但保留滚动能力的兼容写法
想藏掉滚动条又不让用户失去拖拽/滚轮能力？别用 overflow: hidden，它真会禁掉滚动。核心思路是“遮住滚动条，但不挡住滚动区域”。
- WebKit：用负 margin + padding 抵消滚动条宽度，再用
overflow: hidden裁剪父容器 - Firefox：仅靠
scrollbar-width: none即可（注意：仅支持auto或none，不支持thin时隐藏） - 通用保底：
.hide-scrollbar { overflow: overlay; }（旧版 Chrome 支持，现已被弃用，慎用）
推荐方案（两层结构）：
<div class="scroll-parent"> <div class="scroll-child">...</div> </div>
.scroll-parent {
overflow: hidden;
padding-right: 17px; /* 预留滚动条宽度 */
}
.scroll-child {
overflow-y: auto;
width: 100%;
height: 200px;
padding-right: 17px; /* 让内容右移，避开被父层裁掉 */
margin-right: -17px; /* 抵消 padding，保持视觉宽度一致 */
}这个模式在 Safari、Chrome、Firefox 下都可靠，且不会影响 touch 滚动或键盘方向键导航。
最易忽略的一点：所有这些技巧都依赖于**滚动容器必须有明确的高度约束**。没有 height、max-height 或 flex 约束的 div，哪怕写了 overflow-y: auto，也不会出现滚动条——浏览器根本不知道“溢出”从哪开始算。
