Flexbox equal height row in a multi row layout

Question

I've been struggling to build a layout with flexbox, and I "think" I've finally got it pretty close. However I'm not sure that the way I layed it out is the most effective / efficient, and I'm still struggling with being able to get a fixed height for the first "row". I need the first row to be able to expand the shortest height to match the height of the tallest row height (for a "grid" look).

I've messed around with trying to set the parent container to display:flex, but that's not doing the trick. =/

I could definitely use a review of my structure, as I do have it functional, but it seems like I've gone div crazy to do it, and wouldn't mind a second opinion on how to clean it up.

     body {
         font-family: Arial, sans-serif;
         font-size: 12px;
     }

     /*----Flexbox Containers----*/
     .wrapper {
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
         overflow: hidden;
     }

     .container {
      display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
     }

     #firstContainer, #secondContainer, #thirdContainer {
      flex:1;
     }

     .row {
      flex:1;
     }

     .col {
      display:flex;
      flex:1;
     }


     .img, .info {
      flex:0.5;
     }

     .title, .img, .info, .reviewText, .recommend, h3 {
      padding: 10px 15px;
     }

     .title {
      font-size:20px;
     }

     .lightGrey {
      background-color:#b3b3b3;
     }

     .darkGrey {
      background-color:#5d5d5d;
     }

     .lightRed {
      background-color:#744646;
     }

     .lightYellow {
      background-color:#c2c6a1;
     }

     .lightGreen {
      background-color:#a7c6a1;
     }


     @media screen and (max-width: 767px) {
         .wrapper {
             flex-direction: column;
         }
     }

<div class="wrapper">
  <div id="firstContainer">
      <div class="container">
          <div class="row lightGrey">
              <h3 class="title">Short Title</h3>
          </div>
      </div>

       <div class="container">
          <div class="col">
              <div class="img darkGrey"><img src="" /></div>
              <div class="info lightRed">1/1/17<br/>Sally Jones<br/>Snoopy</div>
          </div>
      </div>

      <div class="container">
       <div class="row">
        <div class="reviewText lightYellow">Blah Blah blah Blah blah Blah blah.</div>
        <div class="recommend lightGreen">Yes</div>
       </div>
      </div>
  </div>
 
  <div id="secondContainer">
      <div class="container">
          <div class="row lightGrey">
              <h3 class="title">This is a medium length Title. Still pretty short though.</h3>
          </div>
      </div>

       <div class="container">
          <div class="col">
              <div class="img darkGrey"><img src="" /></div>
              <div class="info lightRed">1/1/17<br/>Sally Jones<br/>Snoopy</div>
          </div>
      </div>

      <div class="container">
       <div class="row">
        <div class="reviewText lightYellow">Blah Blah blah Blah blah Blah blah.</div>
        <div class="recommend lightGreen">Yes</div>
       </div>
      </div>
  </div>

  <div id="thirdContainer">
      <div class="container">
          <div class="row lightGrey">
              <h3 class="title">A really really really really really really really really really long title. Much longer than the previous titles.</h3>
          </div>
      </div>

       <div class="container">
          <div class="col">
              <div class="img darkGrey"><img src="" /></div>
              <div class="info lightRed">1/1/17<br/>Sally Jones<br/>Snoopy</div>
          </div>
      </div>

      <div class="container">
       <div class="row">
        <div class="reviewText lightYellow">Blah Blah blah Blah blah Blah blah.</div>
        <div class="recommend lightGreen">Yes</div>
       </div>
      </div>
  </div>
 </div>

jsFiddle

Thanks!

P.S., to give some additional clarity, I'm only looking to have the first row be of equal height, and the 3 columns will be static in nature (no dynamic adding of rows or columns).

Here's a screenshot of what happens with the first row not being equal height, it's not pretty when resized down to tablet size..

So if I could set that first row to be of equal height (without using a fixed height, as the content being loaded into the row is dynamic), that would cleanup the layout a lot.

Answer 1

Something like this? Could be misinterpreting the question.

https://jsfiddle.net/mtfnaztp/4/

If you give the containers a column flex direction and a defined height to fill:

.container {
    height: 300px;
}

#firstContainer, #secondContainer, #thirdContainer {
    flex:1;
    display: flex;
    flex-direction: column;
    height: 300px;
}

Answer 2

I would like to suggest an approach that makes use of Grid Layout. Please view supported browsers on caniuse.com.

With grid it can be as simple as this:

HTML

<div class="grid">
  <div class="content">100%</div>
  <div class="content">50%</div>
  <div class="content">50%</div>
  <div class="content">100%</div>
  <div class="content">100%</div>
</div>

CSS

.grid {
  display: grid;
  grid-auto-rows:
    minmax(auto, 1fr)
    minmax(auto, 1fr)
    minmax(auto, auto)
    minmax(auto, auto);
  grid-template-columns: repeat(2, 1fr);
}

.content:nth-child(1),
.content:nth-child(4),
.content:nth-child(5) {
  grid-column: 1 / 5;
}

---

Here's a JsFiddle of your example implemented with the above:
https://jsfiddle.net/mtfnaztp/8/