Grid容器无法增长至最大高度适配图片，求排查解决

我有一个2列3行的HTML+CSS Grid布局，希望中间行显示用户上传的图片。当前设置下图片能适配单元格，但上传大图时，我希望.container先增长至最大高度（90vh）再缩放图片。我已经设置了容器的width、max-height，且中间行设为1fr，但容器和中间行始终不增长，请问问题出在哪里？

HTML代码 #

<div class="container">
  <div class="inner-container"></div>
  <div class="inner-container"></div>
  <div class="inner-container upload-area" id="upload-area">
    <img src="https://www.flickr.com/photos/76283671@N00/157839004/" alt="img">
  </div>
  <div class="inner-container"></div>
  <div class="inner-container"></div>
  <div class="inner-container"></div>
</div>

CSS代码 #

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr auto;
  width: 80vw;
  height: 50vh;
  max-height: 90vh;
  padding: 2rem;
  column-gap: 2rem;
  row-gap: 1rem;
  background: white;
  border-radius: 10px;
  background-color: var(--background);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.inner-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.upload-area {
  border: 2px solid #cccccc;
  border-radius: 10px;
}

.upload-area img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  object-fit: contain;
}

问题原因与解决方案 #

问题根源 #

你给.container设置了固定的height: 50vh，这会强制容器高度锁定在视口高度的50%，无论内容需要多少空间，容器都无法自动扩展。max-height: 90vh只有在容器高度有机会超过这个值时才会生效，但固定height直接限制了它的上限，导致中间行的1fr也无法获得更多空间。

修复方案 #

将.container的height: 50vh替换为min-height: 50vh：

• min-height会让容器保持至少50vh的高度，当内容（如大图）需要更多空间时，容器会自动增长，直到触碰到max-height: 90vh的上限。
• 此时中间行的1fr会随容器高度扩展，当容器达到最大高度后，图片会因max-height: 100%自动缩放以适应空间，同时保持比例。

修改后的CSS代码 #

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr auto;
  width: 80vw;
  min-height: 50vh; /* 替换固定height为min-height */
  max-height: 90vh;
  padding: 2rem;
  column-gap: 2rem;
  row-gap: 1rem;
  background: white;
  border-radius: 10px;
  background-color: var(--background);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.inner-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.upload-area {
  border: 2px solid #cccccc;
  border-radius: 10px;
}

.upload-area img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  object-fit: contain;
}

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