当容器和​​子项具有自动宽度时，如何添加水平滚动条？

Question

我的容器具有以下样式：

.timeFrameContainer {
  height: 140px;
  padding-top: 10px;
  overflow-y: hidden;
  overflow-x: scroll;
  width:auto;
}

和里面的孩子：

.nutrient {
  width: auto;
  height: 120px;
  margin-left: 10px;
  margin-right: 10px;
  display: inline-block;
}

我的所有容器彼此相邻出现，直到达到页面的整个宽度为止。之后，孩子们出现在其他人的下面。

我希望它们全部并排显示，并且每当超出页面宽度时，都显示一个水平滚动条。我该怎么做？

Answer 1

为防止内联元素换行，请将white-space: nowrap分配给容器：

.timeFrameContainer {
  height: 140px;
  padding-top: 10px;
  overflow-y: hidden;
  overflow-x: scroll;
  width:auto;
  white-space: nowrap;
}

.nutrient {
  width: 120px; /** changed for the demo **/
  height: 120px;
  margin-left: 10px;
  margin-right: 10px;
  display: inline-block;
  background: red; /** changed for the demo **/
}

<div class="timeFrameContainer">
  <div class="nutrient"></div>
  <div class="nutrient"></div>
  <div class="nutrient"></div>
  <div class="nutrient"></div>
  <div class="nutrient"></div>
  <div class="nutrient"></div>
  <div class="nutrient"></div>
  <div class="nutrient"></div>
</div>