Контейнер Html flexbox не распространяется на обернутых детей

Мне нужно иметь макет, который выглядит несколько похожим на начальный экран окна метро с плитками. Для этого я использую макет flexbox. Но у вас возникла проблема с тем, что родительский гибкий контейнер не обертывает своих дочерних элементов, если они завернуты в следующий столбец.

Вот пример скрипта: гибкая упаковка

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;
}

Как вы видите, у меня есть родительский гибкий контейнер, который обертывается строками (.top). Каждая строка состоит из гибких контейнеров, которые обертывают его содержимое столбцом (.middle). Проблема в том, что средние контейнеры (синие) не обертывают вокруг своих детей, которые перемещаются в следующий столбец.

Буду признателен за любые советы. Спасибо.

ОТВЕТЫ