title: Horizontal scroll divs inside vertical scroll div
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/aCbOX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aCbOX.png" alt=""></a></p>
  
  <p>This is the CSS for the outer div (#container), the inner divs (#line1, etc.) and the other divs inside.</p>
  
  <pre><code>#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%;
  }
  </code></pre>
  
  <p>The HTML structure looks like this:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="line1"&gt;
          &lt;div class="smallerDivs"&gt;&lt;div&gt;
          &lt;div class="smallerDivs"&gt;&lt;div&gt;
      &lt;/div&gt;
      &lt;div id="line2"&gt;
          &lt;div class="smallerDivs"&gt;&lt;div&gt;
          &lt;div class="smallerDivs"&gt;&lt;div&gt;
      &lt;/div&gt;
      &lt;div id="line3"&gt;
          &lt;div class="smallerDivs"&gt;&lt;div&gt;
          &lt;div class="smallerDivs"&gt;&lt;div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>