title: Horizontal Scrollbar not showing
body: <p>I have this CSS code:</p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  body {
      background: #F2F1EF;
      font-family: Arial, sans-serif;
  }
  .cf:before,
  .cf:after {
      content: " ";
      display: table;
  }
  
  .cf:after {
      clear: both;
  }
  .cf {
      *zoom: 1;
  }
  #container {
      height:40px;
      overflow-x:auto;
      overflow-y:hidden;
  }
  .column {
      display:inline-block;
      white-space: nowrap;
      width:300px;
  }
  .post {
      height:40px;
  }
  </code></pre>
  
  <p>And HTML as follows:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="column"&gt;
          &lt;div class="post"&gt;
              &lt;h1&gt;Heading 1&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;div class="post"&gt;
              &lt;h1&gt;Heading 2&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;div class="post"&gt;
              &lt;h1&gt;Heading 3&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;div class="post"&gt;
              &lt;h1&gt;Heading 4&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;div class="post"&gt;
              &lt;h1&gt;Heading 5&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;div class="post"&gt;
              &lt;h1&gt;Heading 6&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to show horizontal scrollbar if the container has more columns in it but It hides the overflow content. My body has only this div#container for now.</p>