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

Question

My container has the following styling:

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

and the children inside:

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

All my containers show up next to eachother untill the full width of the page has been reached. After this the children show up underneath the others.

I want them all to show up next to eachother and show a horizontal scrollbar whenever it exceeds the page width. How do I do this?

Answer 1

To prevent the wrapping of inline elements, assign white-space: nowrap to the container:

 .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>