如何使用CSS3制作Windows 8样式布局？

Question

我正在尝试使用带有CSS3的HTML创建Windows 8＆＃39;-style布局，但遇到了一些麻烦。我画了一个小图来传达我想要实现的目标 - 问题是这种布局很容易垂直实现，但不能水平实现。

这是一个垂直的例子：

http://jsfiddle.net/tAdjY/

＆＃13;

＆＃13;

#container {
  width: 320px;
  height: 300px;
  overflow: scroll;
 display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-flow: column nowrap;
}
#container > section {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  flex: none;
  -webkit-flex: none;
  /* Safari 6.1+ */
  -ms-flex: none;
  /* IE 10 */
  margin-bottom: 20px;
  box-sizing: border-box;
}
#container div {
  box-sizing: border-box;
  width: 90px;
  height: 90px;
  margin: 5px;
  background: blue;
}

＆＃13;

<div id="container">
  <section>
    <div></div>
    <div></div>
  </section>
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;

但是在这里，如果我尝试将其设置为水平（相同的标记，不同的CSS），它会被刷掉：

http://jsfiddle.net/tAdjY/1/

＆＃13;

＆＃13;

   #container {
     width: 320px;
     height: 320px;
     overflow: scroll;
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-flow: row nowrap;
     flex-flow: row nowrap;
   }
   #container > section {
     display: flex;
     -webkit-flex-flow: column wrap;
     flex-flow: column wrap;
     box-sizing: border-box;
     margin-right: 20px;
   }
   #container div {
     box-sizing: border-box;
     width: 90px;
     height: 90px;
     margin: 5px;
     background: blue;
   }

＆＃13;

<div id="container">
  <section>
    <div></div>
    <div></div>
  </section>
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;

我不知道是否有真正的解决方案，或者Flexbox是否有限，但我期待任何体面的答案。谢谢！