set images using flexbox css issue

I tired to set images(size are different) using flexbox css. Please check screenshot below and let me know what is going wrong.

blade template

         <div class="parent-block">
            <div class="parent">
                @forelse($portfolios as $portfolio)
                    <div class="view view-tenth child-block">
                      <img src="" class="img-responsive">
                        <div class="mask">
                            <h2></h2>
                            <p></p>
                            <a href="" target="_blank" class="info">SEE DETAILS</a>
                        </div>
                    </div><!-- /.flex-block__area -->
                @empty
                    <p class="text-center">No Portfolio found!</p>
                @endforelse
            </div><!-- /.parent -->
        </div><!-- /.parent-block -->

CSS

 .parent-block {
     margin: 0 auto;
     overflow: hidden;
 }
 .parent {
    width: auto;
    display: flex;
    flex-wrap: wrap;
  }
  .parent img {
     width: 100%;
  }
  .child-block{
     margin: 5px;
  }

Current Output

I need this output

via Chebli Mohamed