Многоколоночная проблема с горизонтальной прокруткой

У меня есть родительский div (основной) с горизонтальным переполнением, установленным на auto. Затем у меня есть дочерний элемент (столбцы), в котором есть все свойства моего столбца. Проблема в том, что как только содержимое выходит за пределы области просмотра, я больше не могу управлять правыми полями или отступами, так как столбец, кажется, идет только до области просмотра. Например, когда я помещаю цвет фона на «столбцы» фон идет только до края области просмотра, даже если содержимое прокручивается дальше.

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

Вот пример:http://jsfiddle.net/fyG24/

Ответы на вопрос(2)

Ваш ответ на вопрос