Flexbox issue - heights not equal

Question

I have created a flex box, please see codepen link here:- https://codepen.io/scottYg55/pen/zYYWbJG .

I want the pink backgrounds of this flexbox to be 50% height and the background image 50% height too, so it looks more of a grid system.

For some reason the pink BG is not expanding its width no matter what I try, I just want the images and Pink BG to all be the exact same height. Maybe CSS grid would be better?

If someone could help that would be great!

HTML

<div class="blog-contl row">



        <div class="col">
          <div class="blog-half">
          <div class="blog-half-img" style="background-image:url('http://www.project-progress.co.uk/cloudhouse/site/wp-content/uploads/blog6.jpg')">
          </div>
          <div class="blog-half-cont">
            <h4>Test Post 12</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <div class="main-button">
              <a href="http://www.project-progress.co.uk/cloudhouse/site/test-post-12/" title="Read More" class="btn-default">Read More</a>
            </div>
          </div>
      </div>
      </div>



        <div class="col">
          <div class="blog-half">
          <div class="blog-half-img" style="background-image:url('http://www.project-progress.co.uk/cloudhouse/site/wp-content/uploads/blog3.jpg')">
          </div>
          <div class="blog-half-cont">
            <h4>Test Post 9</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <div class="main-button">
              <a href="http://www.project-progress.co.uk/cloudhouse/site/test-post-9/" title="Read More" class="btn-default">Read More</a>
            </div>
          </div>
      </div>
      </div>



        <div class="col">
          <div class="blog-half">
          <div class="blog-half-img" style="background-image:url('http://www.project-progress.co.uk/cloudhouse/site/wp-content/uploads/blog6.jpg')">
          </div>
          <div class="blog-half-cont">
            <h4>Test Post 6</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <div class="main-button">
              <a href="http://www.project-progress.co.uk/cloudhouse/site/test-post-6/" title="Read More" class="btn-default">Read More</a>
            </div>
          </div>
      </div>
      </div>



</div>

CSS

.row {display:flex;}

.blog-contl img {width:auto;}

.blog-contl .row {
    display: flex;
    flex-wrap: wrap;
}

.blog-contl .col {padding:0;}

.blog-half {
}

.blog-half-img {
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 50%;
}

.blog-half-cont {
    background: #da55c9;
    margin: 0;
    padding: 40px;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-half {display:flex;flex-wrap:wrap;}

.col:nth-of-type(2) .blog-half .blog-half-cont {
  order:1;
}

.col:nth-of-type(2) .blog-half .blog-half-img {
  order:2;
}

Thank you!

Answer 1

It is better to you use grid instead of flex. Please use the below code. Note: We have used grid to adjust the height.

 .row { display: grid; grid: auto /auto auto auto; }.blog-half { display: grid; grid-auto-rows: 1fr; }.blog-contl img {width:auto;}.blog-half-img { background-size: cover; background-repeat: no-repeat; width: 100%; padding-bottom: 50%; }.blog-half-cont { background: #da55c9; margin: 0; padding: 40px; box-sizing: border-box; text-align: center; color: #fff; display: flex; flex-direction: column; justify-content: center; }.col:nth-of-type(2).blog-half.blog-half-cont { order:1; }.col:nth-of-type(2).blog-half.blog-half-img { order:2; }

 <div class="blog-contl row"> <div class="col"> <div class="blog-half"> <div class="blog-half-img" style="background-image:url('http://www.project-progress.co.uk/cloudhouse/site/wp-content/uploads/blog6.jpg')"> </div> <div class="blog-half-cont"> <h4>Test Post 12</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <div class="main-button"> <a href="http://www.project-progress.co.uk/cloudhouse/site/test-post-12/" title="Read More" class="btn-default">Read More</a> </div> </div> </div> </div> <div class="col"> <div class="blog-half"> <div class="blog-half-img" style="background-image:url('http://www.project-progress.co.uk/cloudhouse/site/wp-content/uploads/blog3.jpg')"> </div> <div class="blog-half-cont"> <h4>Test Post 9</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <div class="main-button"> <a href="http://www.project-progress.co.uk/cloudhouse/site/test-post-9/" title="Read More" class="btn-default">Read More</a> </div> </div> </div> </div> <div class="col "> <div class="blog-half"> <div class="blog-half-img" style="background-image:url('http://www.project-progress.co.uk/cloudhouse/site/wp-content/uploads/blog6.jpg')"> </div> <div class="blog-half-cont"> <h4>Test Post 6</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <div class="main-button"> <a href="http://www.project-progress.co.uk/cloudhouse/site/test-post-6/" title="Read More" class="btn-default">Read More</a> </div> </div> </div> </div> </div>