css - Html flexbox container does not expand over wrapped children -

css - Html flexbox container does not expand over wrapped children -

i need have layout looks similar windows metro start screen tiles. seek utilize flexbox layout. have stuck problem parent flex container not wrap around children if wrapped next column.

here 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 see have parent flex container wraps rows (.top). each row made of flex containers wrap content column (.middle). problem middle containers (blue ones) not wrap around children moved next column.

i appreciate advice. thanks.

adding

.middle { height:99%; }

solved problem.

html css css3 flexbox