用d-flex+flex-grow-1是唯一稳解：外层d-flex flex-row+h-100，左侧flex-shrink-0+固定宽，右侧flex-grow-1+overflow-y-auto；col-*栅格无法实现该效果，因其不响应高度约束且滚动失效。
左侧侧边栏固定、右侧内容可滚动的布局结构怎么写
直接用 Bootstrap 的栅格系统（col- 类）无法实现“左侧固定 + 右侧独立滚动”，因为 row 和 col 默认是流式布局，整个容器高度由子元素撑开，滚动行为作用于整个页面或父容器，而非右侧区域本身。必须脱离栅格的默认流式约束，用 CSS 定位或 Flex 布局控制高度与溢出。
用 Flex 布局配合 min-height: 100vh 实现容器高度控制
Bootstrap 5+ 默认支持 Flex，这是最稳妥的做法：把外层设为 d-flex flex-column 或 d-flex + flex-row，再给右侧区域明确的高度限制和 overflow-y: auto。
关键点：
-
html和body必须设height: 100%，否则100vh在某些场景下会失效 - 外层容器需设
min-height: 100vh（不是height: 100vh），避免内容少时右侧区域被压缩 - 左侧侧边栏加
flex-shrink: 0防止被压缩（Bootstrap 5 的flex-shrink-0类可用） - 右侧区域加
flex-grow-1占满剩余空间，并设overflow-y: auto
示例结构：
<div class="d-flex flex-row h-100"> <nav class="bg-light flex-shrink-0" style="width: 260px;">侧边栏</nav><main class="flex-grow-1 overflow-y-auto p-3">右侧长内容...</main> </div>
为什么不能只靠 col-3 + col-9 和 overflow-y:auto
单纯给右侧 col-9 加 overflow-y: auto 没用，因为它的高度由内容决定，没有上限，滚动条永远不会出现。常见错误现象包括：
- 右侧区域随内容无限拉长，滚动条不显示
- 整个页面滚动，而不是仅右侧区域滚动
- 在移动端视口缩小时，侧边栏被挤压变形（没设
flex-shrink: 0或固定宽）
根本原因是：Bootstrap 栅格列默认是 display: block，不参与 Flex 主轴分配，也无法响应父容器高度约束。必须用 d-flex 替代 row/col 结构，或在外层手动包裹一层 Flex 容器。
兼容性与滚动条样式要注意什么
Firefox 和 Safari 对 overflow-y: auto 的默认行为略有差异，尤其是当右侧内容高度不足时：
- Safari 可能不显示滚动条（即使设置了
overflow-y: auto），需加-webkit-overflow-scrolling: touch（iOS 旧版需要） - 若要隐藏默认滚动条但保留滚动能力，用
overflow-y: overlay（仅 WebKit）或自定义::-webkit-scrollbar - IE11 不支持
flex-grow，如需兼容，得回退到绝对定位方案（position: absolute左右分区）
实际开发中，优先用 Flex + min-height: 100vh，再针对 Safari 加一行 overflow-y: scroll 强制显示滚动条（比 auto 更可靠）。
真正卡住人的地方往往不是写法，而是忘了重置 body 的 margin/padding，或者漏了 h-100 向上传递高度 —— 这两个点不处理，整个 flex 高度链就断了。
