Html Flexbox容器不会扩展包装的子容器

Question

我需要一个看起来有点类似于带有磁贴的windows metro开始屏幕的布局。为此，我尝试使用flexbox布局。但是，如果父Flex容器被包裹到下一列，那么它就会遇到一个问题，即父Flex容器没有包裹它的子节点。

以下是样本小提琴：flex wrapping

HTML：

<div class="top">
  <span class="middle">
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
  </span>
  <span class="middle">
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
      <span class="bottom">0</span>
  </span>
<div>

CSS：

.top
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: stretch;
    height: 400px;
    width:800px;
    background-color:gray;
}

.middle
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    justify-content: flex-start;
    background-color: blue;
    margin: 5px;
}

.bottom
{
    background: tomato;
    margin: 5px;
    width: 50px;
    height: 50px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

如您所见，我有一个父行的Flex容器按行（.top）换行。每行由flex容器组成，它们按列（.middle）包装其内容。问题是中间容器（蓝色容器）不会缠绕在移动到下一列的子容器周围。

我很感激任何建议。感谢。