当div子元素总宽度超出父容器宽度时如何开启水平滚动？

解决方案 #

给.container添加white-space: nowrap属性即可实现需求，这个属性会强制容器内的行内/行内块元素不换行，保持在同一行排列。

修复后的完整代码如下：

.container {
  position: relative; 
  margin: 0 auto;
  width: 300px;
  height: 80px;
  overflow-x: scroll;
  border: 1px solid black;
  /* 新增属性，强制内容不换行 */
  white-space: nowrap;
}

.item {  
  display: inline-block;
  height: 50px;
  width: 100px;
  border:1px solid red;
  background-color: lightblue;
}

<div class="container">
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
  <span class="item">hi</span>
</div>

补充说明：

• white-space: nowrap作用于块级元素时，会让其内部所有行内级内容（包括inline-block元素）不会自动换行，直到遇到<br>标签为止。
• 此时子元素总宽度超过父容器的300px宽度时，你之前设置的overflow-x: scroll会自动生效，出现横向滚动条，父容器宽度不会被撑开。

可选方案：使用Flex布局实现 #

如果不想用white-space属性，也可以给.container设置Flex布局，代码修改如下：

.container {
  position: relative; 
  margin: 0 auto;
  width: 300px;
  height: 80px;
  overflow-x: scroll;
  border: 1px solid black;
  /* 新增Flex相关属性 */
  display: flex;
  flex-wrap: nowrap;
}

这种方案也能达到同样的效果，flex-wrap: nowrap会强制所有Flex子项不换行排列，超出时触发横向滚动。

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