如何实现父div横向滚动、子div纵向滚动的前端布局效果

现有代码存在两个核心问题导致滚动效果不符合预期：

1. 子元素.one设置了width: 100%，宽度被限制为父容器的300px，无法跟随内部内容撑开，因此无法触发父容器的横向滚动
2. 子元素.one设置了height: 300px，高度超出父容器的200px，而父容器设置了overflow-y: hidden，导致子元素的纵向滚动条被裁剪无法正常显示

修复后的完整代码 #

CSS代码 #

.container {
  width: 300px;
  height: 200px;
  border: 2px solid;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  flex-direction: row;
}
.one {
  /* 宽度跟随内部内容自动撑开，触发父容器横向滚动 */
  width: fit-content;
  /* 高度和父容器保持一致，避免纵向滚动条被裁剪 */
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  border: 2px red solid;
}
.text {
  width: 400px;
}

若需要兼容低版本浏览器，可将.one的width: fit-content替换为min-width: 400px，和内部.text的宽度保持一致即可。

HTML代码 #

<div class="container">
  <div class="one">
    <div class="text">
      此处为示例文本。此处为示例文本。此处为示例文本。此处为示例文本。此处为示例文本。
      此处为示例文本。此处为示例文本。此处为示例文本。此处为示例文本。此处为示例文本。
      此处为示例文本。此处为示例文本。此处为示例文本。此处为示例文本。此处为示例文本。
      此处为示例文本。此处为示例文本。此处为示例文本。此处为示例文本。此处为示例文本。
      此处为示例文本。此处为示例文本。此处为示例文本。此处为示例文本。此处为示例文本。
      此处为示例文本。此处为示例文本。此处为示例文本。此处为示例文本。此处为示例文本。
      此处为示例文本。此处为示例文本。此处为示例文本。此处为示例文本。
    </div>
  </div>
</div>

最终效果 #

• 父容器横向可滚动，完整展示400px宽度的文本内容
• 子元素纵向可滚动，完整展示超出200px高度的文本内容
• 两个方向滚动互不干扰

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