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/