Stop caption text extending beyond the width of its image

Question

I would like the caption to start a new line once it reaches the width of its image.

In my example the caption for image two is streatching the image container div, I do not want this.

I think the difficulty I am having is caused by the fact that the width of each image is different, and calculated relaive to its height (please see example). Therefore I cannot just set a fixed width for the caption div (such as 200px).

The things I do not want to change are:

• The heights of all images are equal.
• The gaps between all images are equal.
• The object fit is set to contain.

.row {
  width: 100%;
  aspect-ratio: 8 / 1;
  display: flex;
  justify-content: start;
  border: solid purple;
  gap: 1%;
}

.image-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: solid green;
}

.pic {
  height: 100%;
  object-fit: contain;
  border: solid red;
}

.caption {
  font-size: 10pt;
  border: solid blue;
}

<div class="row">

  <a href="http://placekitten.com/500/600">
    <div class="image-container">

      <img class="pic" src="http://placekitten.com/500/600" />

      <div class="caption">
        Caption Example 1
      </div>

    </div>
  </a>

  <a href="http://placekitten.com/200/600">
    <div class="image-container">

      <img class="pic" src="http://placekitten.com/200/600" />

      <div class="caption">
        Caption Example 2 Caption Example 2 Caption Example 2
      </div>

    </div>
  </a>

  <a href="http://placekitten.com/400/600">
    <div class="image-container">

      <img class="pic" src="http://placekitten.com/400/600" />

      <div class="caption">
        Caption Example 3
      </div>

    </div>
  </a>

</div>

Codepen example here https://codepen.io/GBol/pen/abRJmyx?editors=1100