Html flexbox container does not expand over wrapped children

Question

I need to have a layout that looks somewhat similar to the windows metro start screen with tiles. To do so I try use flexbox layout. But have stuck with a problem that parent flex container does not wrap around its children if they are wrapped to the next column.

Here is sample fiddle: 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;
}

As you see I have parent flex container that wraps by rows (.top). Each row is made up of flex containers that wrap its content by column (.middle). The problem is that middle containers (blue ones) do not wrap around their children that are moved to the next column.

I would appreciate any advice. Thanks.