如何让父div显示子div的横向滚动条？（左侧垂直滚动场景）

页面结构需求 #

需要实现如下布局：

----------------------------------------
|              |s|                 |
| top-content  |p|     details     |
|--------------|l|                 |
|s | tree      |i|                 |
|c |           |t|                 |
|r |           |t|                 |
|o |           |e|                 |
|l |           |r|                 |
|l |           | |                 |
|--|-----------| |                 |
|  |  scroll   | |                 |
-----------------------------------

• 左侧面板中top-content固定在tree上方，因此用wrapper容器实现垂直布局
• 树区域需要垂直滚动条在左侧，因此采用tree-parent-div和tree-child-div的嵌套结构（通过direction: rtl把滚动条移到左侧，子元素还原文字方向）

当前代码 #

CSS #

.wrapper {
  height: 100%;
  display: flex;
  direction: ltr;
  flex-direction: column;
}

.tree-parent-div {
  direction: rtl;
  overflow: auto;
  width: 100%;
  height: inherit;
}

.tree-child-div {
  height: inherit;
  direction: ltr !important;
}

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<br>长内容测试：4152674168794361742343847652361790349568463521678329456584736325145676</div>
  </div>
</div>

问题分析 #

当前垂直滚动条正常，但横向滚动条不显示，原因是：

• direction: rtl会改变容器的横向滚动逻辑，同时子元素无明确宽度限制时，长内容会被容器挤压换行（无空格长串也可能被浏览器自动换行）
• tree-child-div的height: inherit未解决宽度溢出问题，无法触发父容器的横向滚动

解决方案 #

修改tree-parent-div和tree-child-div的CSS，确保横向溢出能被正确识别：

.wrapper {
  height: 100vh; /* 用视口高度或固定值明确容器高度，确保滚动空间可计算 */
  display: flex;
  direction: ltr;
  flex-direction: column;
}

.tree-parent-div {
  direction: rtl;
  overflow: auto;
  width: 100%;
  flex: 1; /* 替代height:inherit，在flex布局中自动填充剩余空间 */
  white-space: nowrap; /* 禁止内容换行，确保宽度溢出触发横向滚动 */
}

.tree-child-div {
  direction: ltr !important;
  display: inline-block; /* 让子元素宽度自适应内容，撑开父容器 */
  min-width: 100%; /* 确保内容至少占满父容器宽度，避免短内容时滚动条异常 */
}

关键修改说明 #

1. 给wrapper设置明确高度（如100vh），确保滚动容器有可计算的可用空间
2. tree-parent-div用flex:1替代height:inherit，在flex布局中更可靠地填充剩余空间
3. 添加white-space: nowrap防止长文本自动换行，确保宽度溢出能触发横向滚动
4. tree-child-div设置display: inline-block和min-width:100%，让子元素宽度自适应内容，同时保证短内容时容器正常占满宽度

修改后，树容器既能保持垂直滚动条在左侧，又能在内容宽度溢出时显示横向滚动条。

内容的提问来源于stack exchange，提问作者fallty371