CSS Grid圣杯布局容器浏览器高度缩小时超子元素高度的问题排查

你遇到的核心问题是容器高度被固定死了：

• 你给.container设置了height: 100vh，这意味着容器高度永远等于当前浏览器视口的高度，是一个硬限制。
• 但你的三个input都设置了min-height:30vh，加起来就占了90vh，再加上header的3em高度，总内容高度很容易超过100vh。当浏览器视口缩小，内容总高度超过容器的固定高度时，容器不会自动扩展，反而会保持100vh，导致子元素溢出，看起来就像容器“过度缩小”了。

只需要把容器的固定高度改成最小高度，让容器能根据内容自动拉伸：

修改.container的CSS属性：

.container {
  border: 1px solid orange;
  display: grid;
  min-height: 100vh; /* 替换原来的height:100vh */
  grid-template-areas: "header header header" "usr1 usr2 usr3";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  grid-gap: 5px;
}

这样设置后：

• 当内容总高度小于等于视口高度时，容器会占满整个视口高度（满足你原本“占据浏览器视口完整高度”的需求）。
• 当内容总高度超过视口高度时，容器会自动跟随子元素的高度扩展，不会再出现被限制住的情况。

如果希望三个input的最小高度是相对于父容器而非视口，可以把min-height:30vh改成min-height:100px或者min-height:30%（注意需要给.userinput添加height:100%才能让百分比高度生效），这样在小屏幕上内容高度不会过度依赖视口大小。

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