如何使元素水平滚动而不是垂直滚动

Question

如何使这些元素水平滚动而不是垂直滚动。现在，div正在垂直滚动，我希望它们水平滚动，我找不到解决方案，甚至设置了容器的高度。

.specials{
  padding: 9rem 0;
}
    
.specials__left{
  height: 516px;
  width: 60%;
  overflow-x: scroll;
  white-space: nowrap;
}
    
.specials__left-content{
  height: 100%;
  width: 60%;
  margin-right: 30px;
  display: inline-block;
  float: left;
  white-space: normal;
  background-color: yellow;
  margin-bottom: 40px;
}

<section class="specials">
                              
               <div class="specials__left">
                                          
                    <div class="specials__left-content"></div>
                    <div class="specials__left-content"></div>
                    <div class="specials__left-content"></div>
                    <div class="specials__left-content"></div>
                    <div class="specials__left-content"></div>
                    <div class="specials__left-content"></div>
                    <div class="specials__left-content"></div>
                                                                                   
               </div>
                                                         
        </section>

Answer 1

尝试使用此：

.grandparent {
  width: 200px;
  height: 125px;
  overflow-x: scroll;
  overflow-y: hidden;
}
    
.parent {
  height: 100px;
  white-space: nowrap;
}
    
.child {
  display: inline-block;
  height: 100px;
  width: 100px;
  margin-right: 30px;
  background-color: blue;
}

<div class="grandparent">       
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div

grandparent元素的宽度有限（导致滚动），但是parent元素使用white-space: nowrap;提供支撑以防止其塌陷。这有帮助吗？