浮动div在固定高度容器中从上到下然后从左到右

我试图在固定高度的容器中从上到下、从左到右垂直浮动 DIV。垂直浮动DIV从上到下按行排列 https://stackoverflow.com/questions/16316329/div-vetically-floating-div-arrange-from-up-to-down-by-rows提出了同样的问题，并且在 div 的尺寸 height:width 为 1:1 的情况下给出了解决方案。在我的情况下，每个 div 都是一个长矩形，并且正如预期的那样，上面帖子中解释的解决方案会中断。

我能够使用名为 flex columns 的新 css 属性找到另一个解决方案。下面给出的样式可以完成这项工作，但它在旧版本的 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>

我的规划结果应该是这样的：

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

列表中的项目数量是任意的。随着项目数量的增加，它应该横向增长。

我的问题是：我们能有任何适用于旧版本 webkit 的解决方案吗？我不需要一个适用于所有浏览器的解决方案。我的产品是专门针对 webkit 的。

或者，如果有人可以针对我提到的重复帖子中提到的解决方案进行修改提供指导，那将非常有帮助。

这应该会给你你正在寻找的东西。

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

我添加了颜色，这样我就可以看到我正在处理的内容。