Многоколоночная проблема с горизонтальной прокруткой
У меня есть родительский 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/