在 Bootstrap 4.6 的 nav tabs 中，为 tab-pane 内部创建两个等高、独立滚动的垂直列时，需避免直接对 .tab-pane 应用 d-flex 等 display 工具类，否则会破坏 Bootstrap 原生 tab 显示逻辑（因 !important 覆盖 display: block/none），导致非激活 tab 内容错位或溢出。
在 bootstrap 4.6 的 nav tabs 中，为 tab-pane 内部创建两个等高、独立滚动的垂直列时，需避免直接对 `.tab-pane` 应用 `d-flex` 等 display 工具类，否则会破坏 bootstrap 原生 tab 显示逻辑（因 `!important` 覆盖 `display: block/none`），导致非激活 tab 内容错位或溢出。
在 Bootstrap 4.6 中实现 Tab 内双列自适应滚动布局，核心挑战在于：既要让内容区域随窗口高度动态伸缩，又要确保每列内容在超出时独立滚动，同时不干扰 Bootstrap 的 tab 切换机制。常见错误是直接在 .tab-pane 上添加 d-flex 或 h-100 —— 这会与 Bootstrap 内置的 .tab-pane { display: none/block } 规则冲突（因工具类含 !important），造成非激活 tab（如 Profile、Contact）内容右偏、宽度异常或无法铺满容器。
✅ 正确做法是：将 flex 布局下移一层，封装在 .tab-pane 内部容器中，而非直接作用于 .tab-pane 本身。
✅ 推荐结构方案（语义清晰 + 兼容性强）
<!-- .tab-pane 保持原生状态，仅控制显隐 -->
<div class="tab-pane fade show active h-100" id="home" role="tabpanel">
<!-- 所有 flex 布局从此处开始 -->
<div class="container-fluid h-100">
<div class="row h-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 class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</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>
? 关键要点说明
| 问题 | 原因 | 解决方案 |
|---|---|---|
| Profile/Contact 内容右偏、未占满 | .tab-pane 被强制设为 display: flex !important，覆盖了 Bootstrap 的 display: block，导致其子元素盒模型计算异常 | ✅ 移除 .tab-pane 上所有 d-flex / d-block 等 display 类，改用内部 container-fluid + row 承载 flex 布局 |
| 滚动条不出现（尤其 Firefox/IE） | overflow: auto 在无明确高度约束的 flex 容器中可能失效 | ✅ 对滚动容器父级设置 flex-grow-1，并确保祖先链存在明确高度（如 h-100 链式传递）；必要时补充 max-height: 100%（如示例中的 .max-height-1） |
| 响应式列宽不理想 | 直接使用 .col 在小屏下可能过窄 | ✅ 使用响应式栅格类（如 .col-12 .col-md-6）控制断点行为，保障移动端单列、桌面端双列 |
? 补充 CSS（增强兼容性）
/* 确保高度链完整传递（尤其在旧版浏览器） */
.h-100, .h-75, .h-50, .h-25 {
height: 100% !important;
}
/* 修复 Firefox/Edge 中 max-height: 0 导致滚动失效的问题 */
.max-height-1 {
max-height: 100%;
}
/* 统一滚动样式（可选） */
.overflow-auto {
overflow: auto;
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}
⚠️ 注意事项
- 切勿在 .tab-pane 上使用 d-flex, d-grid, d-block 等 display 工具类 —— 这是本问题的根本诱因；
- 所有 h-100 必须形成连续高度链：从 html, body → .container-fluid → .row → .tab-pane → 内部 container-fluid → .row；
- 若使用自定义高度（如 h-75），请确保父容器已设 height 或 min-height，否则 h-* 类无效；
- Bootstrap 4.6 不支持 vh 单位在 flex 容器中的可靠计算，推荐坚持 h-100 + flex-grow-1 组合。
通过该方案，Home、Profile、Contact 三个 tab 均能正确渲染为左对齐、全宽、自适应高度的布局，各列内容独立滚动互不干扰，且完全兼容 Bootstrap 4.6 的 JS 行为与 CSS 优先级规则。
