如何只允許水平溢出，不滾動

Question

我有一個CodePen here。

我試圖讓圖像水平延伸到它的引導容器之外，直到視口的最大寬度並且不允許水平滾動。我也試圖隱藏垂直溢出。

我很接近，但還沒有弄明白。我試過組合overflow-y/x:hidden/visible，但無法到達那裏。

有什麼建議嗎？

Answer 1

查看此代碼例如。

#container { 
 
    width:300px; 
 
    height: 60px; 
 
    overflow: hidden; 
 
} 
 
#modules { 
 
    height:90px; /* 40px - more place for scrollbar, is hidden under parent box */ 
 
    padding:5px; 
 
    white-space:nowrap; 
 
    overflow-x: scroll; 
 
    overflow-y: hide; 
 
\t -webkit-overflow-scrolling:touch; 
 
} 
 
.module { 
 
    display:inline-block; 
 
    width:50px; 
 
    height:50px; 
 
    line-height:50px; 
 
    text-align:center; 
 
    background:#ddd; 
 
} 
 
.module + .module { 
 
    margin-left:5px 
 
}

<div id="container"> 
 
    <div id="modules"> 
 
     <div class="module">aaa</div> 
 
     <div class="module">bbb</div> 
 
     <div class="module">ccc</div> 
 
     <div class="module">ddd</div> 
 
     <div class="module">eee</div> 
 
     <div class="module">fff</div> 
 
     <div class="module">ggg</div> 
 
     <div class="module">hhh</div> 
 
     <div class="module">iii</div> 
 
     <div class="module">jjj</div> 
 
     <div class="module">kkk</div> 
 
     <div class="module">lll</div> 
 
    </div> 
 
</div>