如何让CSS Grid高度适配文本内容而非过大图片？

我有一个两列的CSS Grid布局，一列是文本，另一列是图片。目前Grid的高度由尺寸更大的图片列决定，我希望Grid的高度能跟随文本列的高度。

初始代码 #

CSS #

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 1em;
}

.image-container img {
  max-height: 100%;
  width: 100%;
  height: auto;
}

.text {
  background: lightblue;
}

HTML #

<div class="grid">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet purus ac nunc.
  </div>
  <div class="image-container">
    <img src="https://primary-test.jwwb.nl/unsplash/vigsqYux_-8.jpg" alt="Example image" />
  </div>
</div>

我已经可以通过给图片添加position: absolute使其脱离文档流来解决这个问题，但想知道Grid布局系统本身是否提供原生的实现方案？

绝对定位解决方案 #

CSS #

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

.image-container {
  position: relative;
}

.image-container img {
  position: absolute;
  max-height: 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.text {
  background: lightblue;
}

HTML #

<div class="grid">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet purus ac nunc.
  </div>
  <div class="image-container">
    <img src="https://primary-test.jwwb.nl/unsplash/vigsqYux_-8.jpg" alt="Example image" />
  </div>
</div>

内容的提问来源于stack exchange，提问作者SaroGFX