在 Bootstrap 4.6 的 nav tabs 中，为 tab-pane 内部创建两个等高、独立滚动的垂直列时，需避免直接对 .tab-pane 应用 d-flex 等 display 工具类，否则会破坏 Bootstrap 原生的 display: none/block 切换逻辑，导致非激活 tab 内容错位或撑宽。
在 bootstrap 4.6 的 nav tabs 中，为 tab-pane 内部创建两个等高、独立滚动的垂直列时，需避免直接对 `.tab-pane` 应用 `d-flex` 等 display 工具类，否则会破坏 bootstrap 原生的 `display: none/block` 切换逻辑，导致非激活 tab 内容错位或撑宽。
在 Bootstrap 4.6 中实现 Tab 内双列自适应滚动容器，核心挑战在于：既要保证内容区域随视口高度自动伸缩（h-100），又要让两列各自独立滚动（overflow-auto），同时确保所有 tab-pane（包括非激活项）保持标准流式布局、左对齐且充分利用宽度。
❌ 常见错误：滥用 d-flex 在 .tab-pane 上
原始代码中为 #home 添加了 d-flex h-100：
<div class="tab-pane fade show active d-flex h-100" id="home">...</div>
这会导致严重问题：
Bootstrap 通过 CSS 规则控制 tab 显示/隐藏：
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }而 Bootstrap 的 d-flex 工具类定义为：
.d-flex { display: flex !important; }!important 强制覆盖了 display: block，使非激活 tab（如 #profile、#contact）仍保留 display: flex，但其内部未设置 flex-direction 或 width，最终表现为内容右偏、宽度异常、无法左对齐——这正是提问者观察到的现象。
✅ 正确解法：结构隔离 + 容器嵌套
解决方案是剥离 .tab-pane 的 display 干预，改用语义化容器包裹内容，并通过层级继承高度与布局能力：
- 移除所有 .tab-pane 上的 d-flex、flex-row 等 display 类；
- 为每个 tab-pane 内部添加 .container-fluid.h-100 作为布局根容器；
- 在其子 .row 上应用 h-100，确保高度穿透；
- 两列使用 col + d-flex flex-column + flex-grow-1 + overflow-auto 实现弹性滚动。
以下是关键结构示意（以 #home 为例）：
<div class="tab-pane fade show active h-100" id="home">
<!-- ✅ 安全的布局根：不干扰 tab 机制 -->
<div class="container-fluid h-100">
<div class="row h-100"> <!-- 高度继承至 100% -->
<!-- 左列 -->
<div class="col d-flex flex-column">
<div class="row mb-2">
<div class="col"><button class="btn btn-primary">Search</button></div>
</div>
<div class="flex-grow-1 overflow-auto">
<div class="p-3">
<p>长内容...</p>
<!-- 此处内容超出即触发滚动 -->
</div>
</div>
</div>
<!-- 右列 -->
<div class="col d-flex flex-column">
<div class="row mb-2">
<div class="col"><h4>Title</h4></div>
</div>
<div class="flex-grow-1 overflow-auto">
<div class="p-3">
<p>另一组长内容...</p>
</div>
</div>
</div>
</div>
</div>
</div>? 提示：.p-3 是可选内边距，提升可读性；max-height-0 / max-height-1 自定义类在 Bootstrap 4.6 中已非必需（现代浏览器对 overflow-auto + flex-grow-1 支持完善），可精简 CSS。
? 补充说明与最佳实践
- 兼容性保障：该方案在 Chrome、Firefox、Edge（Chromium）、Safari（macOS/iOS）及 IE11（需 flexbox polyfill）中均表现一致；
- 响应式友好：col 类天然支持响应式断点（如 col-md-6），可在小屏下堆叠为单列；
- 避免 !important 污染：不依赖自定义 max-height hack，减少维护成本；
- Profile/Contact 标签页修复：只需对 #profile 和 #contact 同样采用 container-fluid.h-100 包裹，即可恢复左对齐与全宽渲染，无需额外样式；
- 性能提示：滚动容器应尽量避免嵌套过深的 flex 层级（建议 ≤ 3 层），以提升重排重绘效率。
✅ 最终验证要点
| 检查项 | 是否满足 |
|---|---|
| 激活 tab（Home）两列等高、各自滚动 | ✔️ |
| 非激活 tab（Profile/Contact）内容左对齐、占满父容器宽度 | ✔️ |
| 切换 tab 时无布局跳动或宽度偏移 | ✔️ |
| 小屏下自动适配（如 col-12 堆叠） | ✔️（按需添加响应式类） |
通过将布局逻辑从 .tab-pane 移出、交由语义化容器承载，既尊重了 Bootstrap 的组件设计契约，又实现了专业级的滚动布局需求——这是 Bootstrap 4.x 中构建复杂 Tab 内容页的推荐范式。
