Убедитесь, что вертикальное содержимое переполнено горизонтально

Question

TL; DR: Попытка переполнения вертикальных блоков по горизонтали, аналогична интерфейсу Windows «метро». Цветные блоки должны оставаться выровненными по вертикали, если только они не подходят, и в этом случае они должны переполняться в новый столбец (макет блоков будет увеличиваться по горизонтали, поскольку размер по вертикали уменьшается).

На данный момент, я создал страницу HTML, которая отображает следующее:

Внутри этой разметке следующие элементы присутствуют:

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
    <div class="four"></div> 
</div> 

Я пытаюсь определить CSS, так что, когда размер «контейнера» изменяется, цветные блоки переполняются горизонтально, как показано на следующем скриншоте:

Возможно ли это с использованием чистого CSS/SCSS? Должен ли я использовать JavaScript или динамически создавать новые элементы?

Я попытался отобразить такую ​​раскладку, используя следующие правила Сасс, но безрезультатно: https://gist.github.com/psgs/cd87a1b3e70b35e264ec

Большое спасибо,
PSGs

Answer 1

Если блоки плавали левый (float:left), затем вы увеличиваете ширину div, блоки должны автоматически перемещаться вправо или, как вы говорите, должны переполняться горизонтально.