如何让网格单元格高度仅由图片决定，不受描述卡片影响？

我正尝试在网格内的game_box容器中实现描述卡片从图片后方弹出的动画效果，过渡动画已调试完成，但当前布局存在以下问题：

• 设置描述卡片margin-top: -150%后，game_box的高度会被卡片的位置影响，导致图片因网格的overflow规则被截断
• 注释掉描述卡片后，网格高度能正常匹配图片高度

需求明确：

• game_box的高度仅由内部图片决定，完全不受描述卡片位置影响
• 高度需随图片自适应缩放，不能手动固定高度
• 仅使用HTML和CSS实现

之前尝试给game_box添加与卡片位移比例一致的底部内边距，虽能避免图片溢出，但页面变窄时内边距会过度增大，导致页面过长。

核心思路是让描述卡片脱离文档流，这样它的位置变化就不会影响父元素game_box的高度计算。具体修改如下：

1. 给game_box设置position: relative，作为描述卡片绝对定位的参考容器
2. 将description_card的定位方式从relative改为absolute，用top属性控制初始位置（替代负margin）
3. 调整层级z-index，确保图片始终在卡片上方，实现“从图片后方弹出”的视觉效果

.description_card {
  width: 50%;
  margin-left: auto;
  margin-right: 10%;
  top: 100%; /* 初始位置在图片底部，动画时可调整为负数实现弹出效果 */
  position: absolute;
  z-index: 1; /* 卡片层级低于图片 */
  /* 保留你的过渡动画代码，比如：transition: top 0.3s ease; */
}

.game_box {
  background-color: #df5526;
  width: 100%;
  position: relative; /* 作为绝对定位的父容器 */
  z-index: 2;
}

#games_grid {
  display: grid;
  grid-template-columns: repeat(5, 25%);
  overflow-x: scroll;
  overflow-y: hidden;
}

/* 确保图片层级高于卡片 */
.game_box img {
  position: relative;
  z-index: 3;
  width: 100%; /* 图片自适应容器宽度 */
  height: auto; /* 保持图片比例 */
}

HTML #

<div id="games_grid">
  <div class="game_box">
    <a href="mrstretch.html">
      <img src="images/LibraryCapsule.png" alt="Mr. Stretch cover art">
    </a>
    <div class="description_card">
      <h3>Mr. Stretch and the Stolen Fortune</h3>
      <p>Description</p>
      <p class="status">currently in development</p>
    </div>
  </div>
  <div class="game_box">
    <a href="#">
      <img src="images/BoulderManiacE.png" alt="Boulder Maniac cover art">
    </a>
    <div class="description_card">
      <h3>Boulder Maniac</h3>
      <p>Description</p>
      <p class="status"> planned developement</p>
    </div>
  </div>
</div>

CSS #

.description_card {
  width: 50%;
  margin-left: auto;
  margin-right: 10%;
  top: 100%;
  position: absolute;
  z-index: 1;
  transition: top 0.3s ease; /* 示例过渡动画 */
}

/* hover时卡片从下方弹出到图片后方 */
.game_box:hover .description_card {
  top: -50%; /* 根据需求调整弹出位置 */
}

.game_box {
  background-color: #df5526;
  width: 100%;
  position: relative;
  z-index: 2;
}

#games_grid {
  display: grid;
  grid-template-columns: repeat(5, 25%);
  overflow-x: scroll;
  overflow-y: hidden;
}

.game_box img {
  position: relative;
  z-index: 3;
  width: 100%;
  height: auto;
}

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