Multi-column issue with horizontal scroll

Question

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.

.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;
}

<div class="main">
     <div class="columns">
           <p></p>
           <p></p>
           <p></p>
           <p></p>
           <p></p>
     </div>
</div>

Here is an example: http://jsfiddle.net/fyG24/

Answer 1

New Answer: Use Pseudo-Elements to Help

Based on your comments, here is new the fiddle that I believe meets your desires. It adds an extra div wrapping .columns I labeled .scroller, and the following css:

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;    
}
.main {
    background: yellow;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.main:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 120px; /* match columns */
    background: red;
    z-index: 0;
}

.scroller {
    overflow-y: hidden;
    overflow-x: auto;
    height: 100%;
    position: relative;
    z-index: 1;
}


.columns {
    -webkit-column-fill: auto;
    -webkit-column-width: 300px;
    -webkit-column-gap: 40px;
    -moz-column-fill: auto;
    -moz-column-width: 300px;
    -moz-column-gap: 40px;
    height: 120px;
    padding: 0 20px;
    text-align: justify;
    width: auto;
}


.columns > p:last-of-type:after {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    float: right;
    margin-right: -20px;
    margin-top: -1px;
}

I use a pseudo-element in .main to give the background for .columns set to the explicit height you intend for those, then I also use another pseudo-element in the last p to force rendering the final 20px of the column. It should work no matter how long or what part it takes up, and at height: 1px and margin-top: -1px it should not generate a new column if it falls right at the end of a column of text.

Original Answer: Move Overflow and Set a Right Margin

To get the background to transfer, you need to change some CSS, namely:

.main {
    overflow: hidden;
    width: 100%;
}

.columns {
    overflow-x: auto;
}

This seems to be because the .column background is being limited by the 100% width on the .main which is in control of the horizontal scroll bar in your original code. By making .main purely hidden, then setting overflow-x: auto on .columns, the scroll is now controlled by the .columns div, and allows its background to be seen.

To fix the absence of padding on the far right side, the only think I could come up with was to add the following:

.columns > p:last-of-type {
    margin-right: 20px;
}

This puts a right margin on the last p element of the immediate children of .columns which then gave the look I assume you are going for.

Here's the fiddle modified (tested only in Firefox).