Floating divs top to bottom and then left to right in a fixed height container

Question

I am trying to float DIVs vertically from top to bottom and from left to right in a fixed height container. Vetically floating DIV arrange from up to down by rows raises the same issue and a solution has been given in the cases where divs have the size height:width as 1:1. In my cases each div is a long rectangle and as expected the solution explained in the above post breaks.

I was able to find another solution using a new css property called flex columns.The below given style does the job but it wont work in older versions of webkit.

<style>
.container {
    display:flex;
    flex-direction:column;

}
.area {
    width:200px;
    height:100px;
}
</style>

<div class="container">
    <div class="area">area1</div>
    <div class="area">area2</div>
    <div class="area">area3</div>
    <div class="area">area4</div>
    <div class="area">area5</div>
    <div class="area">area6</div>
</div>

My planing result should be like this:

    ---------------------------->
    | -------- --------
    | |Area 1| |Area 5|
    | -------- --------
    | -------- --------
max | |Area 2| |Area 6|
500 | -------- --------
 px | --------
    | |Area 3|   etc..
    | --------
    | --------             /\
    | |Area 4|   etc....... |
    | --------   
    --------------------------->

The number of items in the list is arbitrary. As the number of items increases it should grow sideways.

My questions is: Can we have any solution which works in older versions of webkit. I DONT need a solution which works across all browser. My product is specific to webkit.

Or it will be really helpful if someone can give pointers on the modifications to be made for the solution mentioned in the duplicate post I have mentioned.

Answer 1

This should give you what you're looking for.

 .container { display:flex; flex-flow:column wrap; max-height:500px; background:#ccc; } .area { width:200px; height:100px; background:#444; margin: 1px; } 

 <div class="container"> <div class="area">area1</div> <div class="area">area2</div> <div class="area">area3</div> <div class="area">area4</div> <div class="area">area5</div> <div class="area">area6</div> </div> 

I added the color so I could see what I was working with.