Sprawa wielokolumnowa z poziomym przewijaniem

Mam nadrzędny div (główny) z poziomym przepełnieniem ustawionym na auto. Następnie mam element podrzędny (kolumny), który zawiera wszystkie moje właściwości kolumny. Problem polega na tym, że gdy zawartość idzie dalej niż rzutnia, nie mogę już kontrolować marginesów prawej strony ani dopełnienia, ponieważ kolumna wydaje się iść tylko do rzutni. Na przykład, gdy umieszczam kolor tła na „kolumnach”, tło idzie tylko do krawędzi rzutni, nawet jeśli zawartość przewija się dalej.

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

Oto przykład:http://jsfiddle.net/fyG24/

questionAnswers(2)

yourAnswerToTheQuestion