如何让div.one显示水平滚动条并使子div.two同行排列？

要实现你想要的效果，我们需要调整几个关键CSS属性，核心是让父容器div.one能容纳所有横向排列的子元素并显示水平滚动，同时保证子容器div.two内部文本可独立垂直滚动。以下是修改后的完整代码：

div.one {
  width: 98%;
  border: 5px solid black;
  /* 开启水平滚动，垂直方向裁剪超出内容 */
  overflow-x: auto;
  overflow-y: hidden;
  /* 使用flex布局强制子元素横向排列，不换行 */
  display: flex;
  flex-wrap: nowrap;
  /* 避免子元素被压缩，保持各自设定的宽度 */
  align-items: flex-start;
}

div.two {
  word-wrap: break-word;
  width: 100px;
  height: 100px;
  /* 移除float，改用flex布局控制排列逻辑 */
  /* float: left; */
  border: 3px dotted orange;
  /* 关闭水平滚动，内容超出高度时自动显示垂直滚动条 */
  overflow-x: hidden;
  overflow-y: auto;
  /* 可选：给子元素添加右侧间距，优化视觉体验 */
  margin-right: 12px;
}

<div class='one'>
  <div class='two'>
    <p> Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd </p>
  </div>
  <div class='two'>
    <p> Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd </p>
  </div>
  <div class='two'>
    <p> Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd </p>
  </div>
  <div class='two'>
    <p> Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd </p>
  </div>
  <div class='two'>
    <p> Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd </p>
  </div>
  <div class='two'>
    <p> Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd </p>
  </div>
  <div class='two'>
    <p> Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd </p>
  </div>
</div>

关键修改说明： #

• 给div.one添加display: flex和flex-wrap: nowrap：这会强制所有div.two在同一行排列，不会因父容器宽度不足换行。配合overflow-x: auto，当子元素总宽度超过父容器时，自动触发水平滚动条。
• 移除div.two的float: left：flex布局已经能完美控制子元素排列，float会干扰flex的正常逻辑，所以必须移除。
• 将div.two的overflow-y: visible改为overflow-y: auto：当div.two内文本高度超过100px时，自动显示垂直滚动条；如果文本高度未超出，则不显示滚动条，兼顾功能与美观。
• 添加align-items: flex-start（可选）：确保所有div.two顶部对齐，避免因内部文本高度差异导致的布局偏移。

这样调整后，div.one会显示水平滚动条，所有div.two在同一行可滚动查看，每个div.two内部的文本超出高度时会独立显示垂直滚动条，完全符合你的需求。

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