title: horizontal scroll for Div
body: <p>I am trying to get the horizontal scroll for the div slots. Below is my code.</p>
  
  <p>Slots is the container with 200 px width, which will display 2 slots,</p>
  
  <p>Each slot of width 100 px. </p>
  
  <p>I want to display horizontal scroll when number of slots is more than 2.</p>
  
  <p>Please help me out.</p>
  
  <pre><code>&lt;div class="slots"&gt;
      &lt;div class="slot"&gt;
          &lt;span class="slot-free"&gt; &lt;/span&gt;
          &lt;span class="slot-free"&gt; &lt;/span&gt;
          &lt;span class="slot-free"&gt; &lt;/span&gt;
          &lt;span class="slot-free"&gt; &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="slot"&gt;
          &lt;span class="slot-busy"&gt; &lt;/span&gt;
          &lt;span class="slot-busy"&gt; &lt;/span&gt;
          &lt;span class="slot-busy"&gt; &lt;/span&gt;
          &lt;span class="slot-busy"&gt; &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="slot"&gt;
          &lt;span class="slot-free"&gt; &lt;/span&gt;
          &lt;span class="slot-free"&gt; &lt;/span&gt;
          &lt;span class="slot-free"&gt; &lt;/span&gt;
          &lt;span class="slot-free"&gt; &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.slots{
       width: 200px;
       overflow-y: hidden;
       display: inline-table;
       height: 25px;
       overflow: auto;
  }
  
  .slot{
       width:100px;
       height:25px;
       display: inline-block;
  }
  
  .slot-free, .slot-busy {
       width: 25px;
       height: 25px;
       display: inline-block;
       margin: 0;
       padding: 0;
  }
  </code></pre>