How to only allow horizontal overflow, with no scroll

Question

I have a CodePen here.

I am trying to allow the image extend outside of it's bootstrap container horizontally, up to the maximum width of the viewport and allow no horizontal scrolling. I am also trying to hide the vertical overflow.

I'm close but haven't quite figured it out. I've tried combinations overflow-y/x:hidden/visible but couldn't get there.

Any suggestions?

This question is already answered [here](http://stackoverflow.com/questions/20409744/html-horizontal-scrolling-without-a-scollbar) — Umang Patwa, Jan 20 '17 at 07:29

score 0 · Answer 1 · answered Jan 20 '17 at 07:36

Check this code for example.

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

How to only allow horizontal overflow, with no scroll

1 Answers1