Ensure vertical content overflows horizontally

Question

TL;DR: Attempting to overflow vertical blocks horizontally, similar to the Windows "metro" interface. The coloured blocks should remain aligned vertically, unless they can not fit, in which case they should overflow into a new column (the blocks' layout would increase in size horizontally, as the vertical size is decreased).

At the moment, I have created an HTML page that displays the following:

Inside this markup, the following elements are present:

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

I am trying to define CSS rules so that, when the "container" div is resized, the coloured blocks overflow horizontally, as shown in the following screenshot:

Would this be possible using pure CSS/SCSS? Would I be required to use JavaScript or dynamically create new elements?

I have attempted to display such a layout using the following SASS rules, but to no avail: https://gist.github.com/psgs/cd87a1b3e70b35e264ec

Many thanks,
psgs

Answer 1

If your blocks are floated left (float:left), then as you increase the width of the div the blocks should automatically move towards the right or, as you say, should overflow horizontally.