基于Flex布局实现全屏宽度隐藏信息容器的显示问题求助

各位好，我正在尝试用CSS Flex布局实现一个需求：让一组卡片下方能展开一个占满整个容器宽度的信息行，但目前遇到了瓶颈，想请大家帮忙看看。

具体需求是这样的：我有一组用Flex排列的图片卡片（比如人像头像），它们能自适应容器宽度，排列得很规整。现在希望当hover（或者点击）任意一张卡片时，会在卡片所在行的下方弹出一个新的行，这个行要占满整个Flex容器的宽度，用来展示对应卡片的详细信息——比如更大的图片、文字介绍之类的。

但我现在写的代码里，信息层被限制在了原卡片的宽度里，根本没法横向扩展到整个容器。我试过给信息层加position: absolute，但好像也没解决问题，反而带来了其他布局混乱。

下面是我目前的代码：

CSS 代码 #

/* Anordnung der Bildkacheln mithilfe von flexbox */
.image-grid {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  align-content: stretch;
  align-items: stretch;
  max-width: 1000px;
}

.image-tile {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 150px;
  margin: 0 12px 24px;
  flex-flow: row wrap;
  align-content: flex-start;
}

.image-tile img {
  width: 100%; /* Anpassung der Bildgröße an den Container */
  height: auto;
  object-fit: cover; /* Anpassung des Bildes an die Größe des Containers */
}

/* Zusatzinformationslayer */
.image-info {
  display: none; /* Standardmäßig ausgeblendet */
  /* position: absolute; 我试过这个属性，但没达到预期 */
  text-align: center;
  border: 1px solid green;
}

.image-tile:hover .image-info {
  display: block; /* Anzeigen bei Hover */
}

HTML 代码 #

<html>
<head></head>
<body>
<div class="image-grid">
  <!-- Bildkachel -->
  <div class="image-tile">
    <img src="https://dummyimage.com/600x400/000/fff" alt="Bild 1">
    <div class="image-info">
      Zusatzinformationen über Bild 1<br>
      Zusatzinformationen über Bild 1<br>
      Zusatzinformationen über Bild 1<br>
      Zusatzinformationen über Bild 1<br>
      Zusatzinformationen über Bild 1<br>
    </div>
  </div>

  <!-- Weitere Bildkacheln -->
  <div class="image-tile">
    <img src="https://dummyimage.com/600x400/1124d4/fff" alt="Bild 2">
    <div class="image-info">
      <img src="download.png" alt="Bild 2">
      Zusatzinformationen über Bild 2
    </div>
  </div>

  <div class="image-tile">
    <img src="https://dummyimage.com/600x400/000/1124d4" alt="Bild 3">
    <div class="image-info">
      Zusatzinformationen über Bild 3
    </div>
  </div>

  <div class="image-tile">
    <img src="download.png" alt="Bild 4">
    <div class="image-info">
      Zusatzinformationen über Bild 4
    </div>
  </div>

  <div class="image-tile">
    <img src="download.png" alt="Bild 2">
    <div class="image-info">
      Zusatzinformationen über Bild 2
    </div>
  </div>

  <div class="image-tile">
    <img src="download.png" alt="Bild 3">
    <div class="image-info">
      Zusatzinformationen über Bild 3
    </div>
  </div>

  <div class="image-tile">
    <img src="download.png" alt="Bild 4">
    <div class="image-info">
      Zusatzinformationen über Bild 4
    </div>
  </div>

  <div class="image-tile">
    <img src="download.png" alt="Bild 2">
    <div class="image-info">
      Zusatzinformationen über Bild 2
    </div>
  </div>

  <div class="image-tile">
    <img src="download.png" alt="Bild 3">
    <div class="image-info">
      Zusatzinformationen über Bild 3
    </div>
  </div>

  <div class="image-tile">
    <img src="download.png" alt="Bild 4">
    <div class="image-info">
      Zusatzinformationen über Bild 4
    </div>
  </div>

  <div class="image-tile">
    <img src="download.png" alt="Bild 2">
    <div class="image-info">
      Zusatzinformationen über Bild 2
    </div>
  </div>

  <div class="image-tile">
    <img src="download.png" alt="Bild 3">
    <div class="image-info">
      Zusatzinformationen über Bild 3
    </div>
  </div>

  <div class="image-tile">
    <img src="download.png" alt="Bild 4">
    <div class="image-info">
      Zusatzinformationen über Bild 4
    </div>
  </div>
</div>
</body>
</html>

有没有哪位朋友能帮我调整一下布局，让hover时的信息层能占满整个.image-grid的宽度？万分感谢！

备注：内容来源于stack exchange，提问作者Ben O. Boehm