Image and text columns, grow image up to text column height

Question

Is there any way in pure CSS to ensure that another one of the divisions in flex container never exceeds height of another division?

For situations, when images are high, I don't want them to make vertically centered text next to them be pushed down so far that reader scrolling down would see top of the image and empty column next to it, scroll down more and more, for text only to appear there.

What are your suggestions how to solve this issue with other means?

This is my attempt so far. This is to build a responsive layout for various situations, without knowing height of text or window width.

https://jsfiddle.net/Deele/khj9n42g/

.row {
  display: flex;
  align-items: stretch;
  margin-top: 1rem;
}

.col {
  flex: 1 0 0%;
  flex-basis: 50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 1rem;
}

.container {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.col_image {
  text-align: center;
  overflow: hidden;
}

figure {
  height: 100%;
  margin: 0;
}

figure img {
  height: 100%;
  width: auto;
}

/* for debug only */
.col_text {
  background-color: rgba(255, 0, 0, 0.1)
}

.col_image {
  background-color: rgba(0, 255, 0, 0.1)
}

<div class="container">
  <div class="row">
<div class="col col_text">
  <h3>This text is higher than image, image should scale up</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat sapien a imperdiet congue. Vestibulum non nulla aliquam, varius massa euismod, faucibus lacus. Quisque scelerisque facilisis rutrum. Nulla eu eros efficitur, aliquam libero nec, suscipit dolor. Morbi eleifend luctus orci, id condimentum felis luctus in. Sed accumsan mi in leo varius venenatis. Morbi et venenatis ex.</p>
</div>
<div class="col col_image">
  <figure><img src="https://via.placeholder.com/200x100" /></figure>
</div>
  </div>
</div>
<div class="container">
  <div class="row">
<div class="col col_text">
  <h3>This text is longer than image, image should scale up</h3>
  <h4>Image is wider than column, it should be cut off to fill height</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat sapien a imperdiet congue. Vestibulum non nulla aliquam, varius massa euismod, faucibus lacus. Quisque scelerisque facilisis rutrum. Nulla eu eros efficitur, aliquam libero nec, suscipit dolor. Morbi eleifend luctus orci, id condimentum felis luctus in. Sed accumsan mi in leo varius venenatis. Morbi et venenatis ex.</p>
</div>
<div class="col col_image">
  <figure><img src="https://via.placeholder.com/500x100" /></figure>
</div>
  </div>
</div>
<div class="container">
  <div class="row">
<div class="col col_text">
  <h3>This text is shorter than image, image should scale down</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat sapien a imperdiet congue. Vestibulum non nulla aliquam, varius massa euismod, faucibus lacus. Quisque scelerisque facilisis rutrum. Nulla eu eros efficitur, aliquam libero nec, suscipit dolor. Morbi eleifend luctus orci, id condimentum felis luctus in. Sed accumsan mi in leo varius venenatis. Morbi et venenatis ex.</p>
</div>
<div class="col col_image">
  <figure><img src="https://via.placeholder.com/720x490" /></figure>
</div>
  </div>
</div>

Answer 1

This looks more like an overall grid than a series of flexboxes.

We don't want the dimensions of the images to influence the height of each row so this snippet makes just one container which has the grid setting for columns, but leaves the height of the rows to be decided by content.

It puts the images in as backgrounds so their dimensions have no influence on the row height which is now determined solely by the text in the first column.

.container {
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.container>* {
  background: cyan;
}

.col_image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="col col_text">
    <h3>This text is higher than image, image should scale up</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat sapien a imperdiet congue. Vestibulum non nulla aliquam, varius massa euismod, faucibus lacus. Quisque scelerisque facilisis rutrum. Nulla eu eros efficitur, aliquam libero nec,
      suscipit dolor. Morbi eleifend luctus orci, id condimentum felis luctus in. Sed accumsan mi in leo varius venenatis. Morbi et venenatis ex.</p>
  </div>
  <div class="col col_image" style="background-image: url(https://via.placeholder.com/200x100);" />
</div>
<div class="col col_text">
  <h3>This text is longer than image, image should scale up</h3>
  <h4>Image is wider than column, it should be cut off to fill height</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat sapien a imperdiet congue. Vestibulum non nulla aliquam, varius massa euismod, faucibus lacus. Quisque scelerisque facilisis rutrum. Nulla eu eros efficitur, aliquam libero nec,
    suscipit dolor. Morbi eleifend luctus orci, id condimentum felis luctus in. Sed accumsan mi in leo varius venenatis. Morbi et venenatis ex.</p>
</div>
<div class="col col_image" style="background-image: url(https://via.placeholder.com/500x100);">
</div>
<div class="col col_text">
  <h3>This text is shorter than image, image should scale down</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat sapien a imperdiet congue. Vestibulum non nulla aliquam, varius massa euismod, faucibus lacus. Quisque scelerisque facilisis rutrum. Nulla eu eros efficitur, aliquam libero nec,
    suscipit dolor. Morbi eleifend luctus orci, id condimentum felis luctus in. Sed accumsan mi in leo varius venenatis. Morbi et venenatis ex.</p>
</div>
<div class="col col_image" style="background-image: url(https://via.placeholder.com/720x490);">
</div>
</div>

Note: obviously you will want to add any dimensions required for the overall container, padding etc. Also the snippet centers the images on the cells, by using position center and size cover. Alter this if you really do want the images to sit to the top/left and be cut off on the bottom/right.