当子元素内容超宽时，需通过设置父容器 overflow-x: auto 和子元素 width: max-content，配合合理的高度控制，才能使水平滚动条正常出现并置于父容器内。
当子元素内容超宽时，需通过设置父容器 `overflow-x: auto` 和子元素 `width: max-content`，配合合理的高度控制，才能使水平滚动条正常出现并置于父容器内。
在构建具有固定顶部区域与可滚动侧边树形结构（如 jsTree）的布局时，常遇到一个典型问题：垂直滚动条能正常显示在左侧（通过 direction: rtl 实现），但当子内容（例如超长数字节点名）超出父容器宽度时，水平滚动条却未出现。根本原因在于 height: inherit 在 Flex 布局中与 direction: rtl 叠加后，会干扰浏览器对溢出内容的尺寸计算逻辑，导致 overflow-x 失效。
以下是经过验证的专业解决方案：
✅ 核心 CSS 修复要点
.wrapper {
height: 100vh; /* 推荐使用 vh 或明确高度，避免 inherit 不稳定 */
display: flex;
flex-direction: column;
}
.top-content {
height: 40px; /* 固定高度，便于后续计算 */
flex-shrink: 0; /* 防止被压缩 */
}
.tree-parent-div {
overflow-y: scroll; /* 启用垂直滚动（左置） */
overflow-x: auto; /* 关键：启用水平滚动 */
width: 100%;
height: calc(100% - 40px); /* 减去 top-content 高度，确保可用空间明确 */
direction: rtl; /* 保持滚动条在左侧 */
/* 移除 height: inherit —— 它在 flex 中不可靠 */
}
.tree-child-div {
direction: ltr; /* 恢复内容正常阅读方向 */
width: max-content; /* 关键：强制子元素宽度由内容撑开，触发父级 overflow-x */
min-width: 100%; /* 可选：保证不窄于父容器，避免意外换行 */
}
✅ HTML 结构（保持语义清晰）
<div class="wrapper">
<div class="top-content">Here lies top content</div>
<div class="tree-parent-div">
<div class="tree-child-div">
Here lies the js tree with a big number
4152674168794361742343847652361790349568463521678329456584736325145676
</div>
</div>
</div>
⚠️ 注意事项
- 高度必须显式可控：.wrapper 必须有确定高度（如 100vh、500px 或嵌套在有高度限制的容器中），否则 calc(100% - 40px) 无效，垂直滚动将失效。
- 避免 inherit 在 Flex 子项中用于高度：Flex 布局下 height: inherit 行为不一致，优先使用 calc() 或 flex: 1 配合 min-height: 0。
- max-content 兼容性：现代浏览器（Chrome 69+、Firefox 61+、Safari 14.1+）均支持。若需兼容旧版 Safari，可用 white-space: nowrap + display: inline-block 替代，但需额外包裹处理。
- RTL 滚动条位置仅影响垂直方向：direction: rtl 使 overflow-y: scroll 的滚动条出现在左侧，但不影响 overflow-x 的行为；水平滚动条始终位于底部（符合标准流）。
该方案在保留原有 RTL 垂直滚动条定位优势的同时，精准激活水平滚动能力，适用于 jsTree、复杂表格、宽文本节点等场景，兼具健壮性与可维护性。
