Shrink one column's height to content and stretch the other to the same height

Question

We have a two-column layout, with a blue and a green column. It should behave after the following conditions:

• Both columns have equal width.

Answer 1

You could do like this, where you use a absolute position wrapper in the right column, which will always keep same size as the left, and if to much content, it scrolls

html, body {
  margin: 0;
}
.container, .left-column {
  display: flex;
}
.left-column {
  flex: 1;
  flex-wrap: wrap;
  background: #69f;
}
.left-items {  
  flex-basis: calc(50% - 10px);
  margin: 5px;
  background: lightgray;
}
.right-column {
  flex: 1;
  position: relative;
  background: #6f6;
}
.right-wrapper {
  position: absolute;
  left: 5px; top: 5px;
  right: 5px; bottom: 5px;
  background: lightgray;
  overflow: auto;
}

<div class="container">

  <div class="left-column">

    <div class="left-items">    
Content will push height here<br>
    </div>    
    <div class="left-items">    
      Content will push height here<br>
    </div>    
    <div class="left-items">    
      Content will push height here<br>
    </div>    
    <div class="left-items">    
      Content will push height here<br>
    </div>    
    <div class="left-items">    
      Content will push height here<br>
    </div>    
    <div class="left-items">    
      Content will push height here<br>
    </div>    

  </div>

  <div class="right-column">
    <div class="right-wrapper">
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
      Content will scroll here<br>
    </div>    
  </div>
  
</div>

Answer 2

You can float: left the blue column, and use position: absolute on the green column, setting right : 0 on it so that it pulls to the right of the container. For the image using the full height of its container and maintaining proportions you can use a div with background-image and background-position: cover.

Here is an example of a simple html structure and its css:

HTML

<div class="col-container">
    <div class="blue-col">
        <div class="blue-col-content">
            Variable height content
        </div>
    </div>
    <div class="green-col">
        <div class="img"></div>
    </div>
    <div style="clear:both;"></div>
</div>

CSS

.col-container {
  position: relative;
  width: 100%;
  height: auto;
}

.blue-col {
  background-color: blue;
  width: 50%;
  float: left;
  height: auto;
  padding: 30px;
  box-sizing: border-box;
}

.blue-col-content {
  background-color: #ccc;
  height: 500px;
}

.green-col {
  position: absolute;
  top: 0;
  right: 0;
  background-color: green;
  width: 50%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
}

.green-col .img {
  background-color: #ccc;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('http://cdn.blessthisstuff.com/imagens/stuff/porsche-356-outlaw.jpg');
}

Here is a working fiddle of the solution.