Mehrspaltige Ausgabe mit horizontalem Bildlauf

Ich habe ein übergeordnetes div (main), dessen horizontaler Überlauf auf auto eingestellt ist. Ich habe dann ein untergeordnetes Element (Spalten), das alle meine Spalteneigenschaften enthält. Das Problem ist, dass ich, sobald der Inhalt über das Ansichtsfenster hinausgeht, die rechten Ränder oder den Abstand nicht mehr kontrollieren kann, da die Spalte nur bis zum Ansichtsfenster zu reichen scheint. Wenn ich beispielsweise "Spalten" eine Hintergrundfarbe hinzufüge, reicht der Hintergrund nur bis zum Rand des Ansichtsfensters, obwohl der Inhalt weiter scrollt.

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

Hier ist ein Beispiel:http://jsfiddle.net/fyG24/

Antworten auf die Frage(2)

Ihre Antwort auf die Frage