Flex-box layout make no-stretching raw

Question

Is it possible to make dynamic content from database not to stretch on height in wrapping raws. Here is what I've achieved.

.main-raw {
  width: 250px;
  height: 100%;
   display: -webkit-flex;
   display: flex;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   -webkit-align-content: flex-end;
   align-content: flex-end;
}
 
.item-1, .item-2, .item-3  {
  width: 100px;
  margin: 3px;
  background-color: black;
}

.item-1 {
  height: 100px;
}

.item-2 {
  height: 200px;
}

.item-3 {
  height: 150px;
}

<div class='main-raw'>
  <div class='item-1'>&nbsp</div>
  <div class='item-2'>&nbsp</div>  
  <div class='item-3'>&nbsp</div> 
</div>

And here is what I am looking for:

Answer 1

wasn't too sure by what you meant, when you said 'not stretch on height'

but I contained the elements in there own wrappers in order to properly position them.

<div class='main-raw'>

  <div class="first-row">
    <div class='item item-1'>&nbsp</div>
    <div class='item item-2'>&nbsp</div>
  </div>

  <div class="second-row">
    <div class='item item-3'>&nbsp</div> 
    <div class='item item-4'>&nbsp</div> 
  </div>

  <div class="third-row">
    <div class='item item-5'>&nbsp</div> 
    <div class='item item-6'>&nbsp</div> 
  </div>

</div>

here is an example:

https://jsfiddle.net/ax0mfc0p/2/