title: Force horizontal expansion
body: <p>For a sort of thumbnail horizontal sliding viewer</p>
  
  <p>How can I make the divs inside the horizontal scrolling divs force the scrolling div horizontally, instead of reaching the end and starting a new line?</p>
  
  <p>I am already using float: left and display: inline-block but they reach the end of their container and make a new line instead of forcing the container to expand horizontally to fit them and thus forcing the horizontal scrollbar to be needed</p>
  
  <p>so the div boxes are force to do this:</p>
  
  <pre><code>[ ][ ][ ][ ][ ][ ][ ][ ][ ][ ]
        &lt;----&gt;scroll
  </code></pre>
  
  <p>instead of:</p>
  
  <pre><code>[ ][ ][ ][ ]
  [ ][ ][ ][ ]
  </code></pre>
  
  <p>code:</p>
  
  <pre><code>&lt;div style="overflow-x: scroll; overflow-y:hidden; width:500px; height: 140px;"&gt;
       &lt;div style="width: auto;"&gt;
             &lt;div class="box"&gt;&lt;/div&gt;
             &lt;div class="box"&gt;&lt;/div&gt;
             &lt;div class="box"&gt;&lt;/div&gt;
             &lt;div class="box"&gt;&lt;/div&gt;
             &lt;div class="box"&gt;&lt;/div&gt;
             &lt;div class="box"&gt;&lt;/div&gt;
             &lt;div class="box"&gt;&lt;/div&gt;
             &lt;div class="box"&gt;&lt;/div&gt;
       &lt;div&gt;
  &lt;/div&gt;
  
  
  .box{
      width: 100px;
      height: 100px;
      border: solid 1px black;
      float:left;
      display: inline-block;
  }
  </code></pre>