如何只允许水平溢出，没有滚动

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