CSS Flexbox: filling blank space between vertical elements -

i have problem flexbox: have html:

<div class="panel-body">    <div class="project">     </div>     <div class="project">     </div>    <div class="project">     </div>    <div class="project">     </div>    <div class="project">     </div>  </div> 

you idea...

now, want this:

|project| |project| |project|

|project| |project| |project|

|project| |project| |project|

etc..

but, projects taller others. year ago managed put them nicely isotope.js plugin, this:

as can see, item "5555" right after "nexus 5", , same "44444" , "nexus 7".

the question is, how can flexbox? possible?

my current css code:

.panel-body{    display: flex;    flex-wrap: wrap;    align-items: flex-start; }  .panel-body .project {    flex-grow: 1;    flex-shrink: 1;    flex-basis: 300px;    margin: 1px 10px; } 

and how looks right now(the arrows tell how want look)

you can't flex-box yet. but, css3 columns may provide close after.

demo: http://jsfiddle.net/abhitalks/nhbdl/

html markup:

same in question.

css:

div.panel-body {      height: 600px;        /* fixed height allows control column fill */     -webkit-columns: 3;   /* number of columns want */     column-count: 3;      /* standard property after prefixed ones */ }  div.project {     background-color: #cfffbd;     -webkit-column-break-inside: avoid; /* prevent breaking blocks across columns */     column-break-inside: avoid;         /* standard property after prefixed ones */ } 

.