Problema de várias colunas com rolagem horizontal

Eu tenho um pai div (principal) com o estouro horizontal definido como automático. Então eu tenho um elemento filho (colunas) que tem todas as minhas propriedades de coluna nele. O problema é que, uma vez que o conteúdo vai além da viewport, não consigo mais controlar as margens ou preenchimentos à direita, pois a coluna parece ir apenas até a viewport. Por exemplo, quando coloco uma cor de plano de fundo em "colunas", o plano de fundo vai tão longe quanto a borda da viewport, embora o conteúdo role mais além.

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

Aqui está um exemplo:http://jsfiddle.net/fyG24/

questionAnswers(2)

yourAnswerToTheQuestion