title: Multi-column issue with horizontal scroll
body: <p>I have a parent div (main) with the horizontal overflow set to auto.  I then have a child element (columns) that has all of my column properties on it.  The problem is that once the content goes further than the viewport I can no longer control the right hand margins or padding as the column only seems to go as far as the viewport.  For example when I put a background color on "columns" the background only goes as far as the edge of the viewport even though the content scrolls further than that.</p>
  
  <pre><code>.main {
      overflow-x: visible;
      overflow-y: hidden;
      width: 100%;
  }
  .columns {
      background: red;
      column-fill: auto;
      column-width: 670px;
      column-gap: 80px;
      height: 120px;
      padding: 20px;
      width: auto;
  }
  
  &lt;div class="main"&gt;
       &lt;div class="columns"&gt;
             &lt;p&gt;&lt;/p&gt;
             &lt;p&gt;&lt;/p&gt;
             &lt;p&gt;&lt;/p&gt;
             &lt;p&gt;&lt;/p&gt;
             &lt;p&gt;&lt;/p&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is an example:  <a href="http://jsfiddle.net/fyG24/">http://jsfiddle.net/fyG24/</a></p>