Horizontal scroll divs inside vertical scroll div

Question

is it possible to scroll the outer div only vertically and the inner divs (containing smaller divs) only horizontally? I'm using cordova for a mobile app and I can scroll the outer div both horizontally and vertically. The inner divs don't scroll.

This is the CSS for the outer div (#container), the inner divs (#line1, etc.) and the other divs inside.

#container {
   height: 100%;
   overflow-y: auto;
}

#line1, #line2, #line3 {
    display: table;
    width: 50em;
    overflow-x: auto;
}

.smallDivs {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    margin-right: -6%;
}

The HTML structure looks like this:

<div id="container">
    <div id="line1">
        <div class="smallerDivs"><div>
        <div class="smallerDivs"><div>
    </div>
    <div id="line2">
        <div class="smallerDivs"><div>
        <div class="smallerDivs"><div>
    </div>
    <div id="line3">
        <div class="smallerDivs"><div>
        <div class="smallerDivs"><div>
    </div>
</div>

Answer 1

You can use white-space: nowrap; in yours #lineX and set overflow: hidden; to html and body

Try to use this basic example to guide you:

html,body{
    height: 100%;
    overflow: hidden;
}

#container {
   height: 100%;
   overflow-y: auto;
   background: red;
}

#line1, #line2, #line3 {
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px;
    background: yellow;
    margin: 30px;
}

.smallerDivs {
    height: 112px;
    width: 112px;
    margin: 10px;
    display: inline-block;
    vertical-align: middle;
    background: #fff;
}

<div id="container">
    <div id="line1">
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
    </div>
    <div id="line2">
         <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
    </div>
    <div id="line3">
         <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
        <div class="smallerDivs"></div>
    </div>
</div>

Here a jsfddle to play width