Grid布局中Flex子元素nav异常溢出问题求助

问题核心原因 #

1. Grid行高度未定义：body作为Grid容器仅设置了列布局，未指定grid-template-rows，导致Grid行高度默认由内容撑开，而非匹配容器的height:100vh/max-height:29.7cm。当窗口高度足够大时，body被max-height限制为29.7cm，但nav所在的Grid单元格高度仍由内容决定，两者高度不匹配引发溢出。
2. Flex子元素默认高度限制：nav使用Flex垂直布局，其中.button.last的margin-top:auto会挤压其他元素空间，同时Flex子元素默认min-height:auto，即使容器高度受限，子元素也不会自动收缩，加剧溢出。
3. 语法错误：grid-template-columns中的1fr%是无效写法，应为1fr，这可能导致列宽计算异常。

修复步骤及代码 #

1. 全局样式重置（避免padding/margin干扰） #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. 修正Grid容器配置 #

给body添加行布局定义，强制行高占满容器高度：

body{
  place-content: center;
  max-height: 29.7cm;
  max-width: 30cm;
  height: 100vh;
  margin: auto;
  display: grid;
  grid-template-columns: 15% 1fr; /* 修正1fr%的语法错误 */
  grid-template-rows: 1fr; /* 新增：让Grid行占满容器高度 */
}

3. 调整nav的Flex布局配置 #

让nav高度匹配Grid单元格，并允许Flex子元素收缩：

body>nav{
  display: flex;
  flex-direction: column;
  position: relative;
  font-size: clamp(13px, 2vw, 17px);
  line-height: 1.1;
  height: 100%; /* 让nav高度与Grid单元格一致 */
  min-height: 0; /* 覆盖Flex子元素默认min-height:auto，允许内容收缩 */
}

body>nav>.button.last {
  margin-top: auto;
}

为什么之前的尝试无效？ #

• 仅设置min-height:0但未给nav指定height:100%，nav高度仍由内容撑开，未与Grid单元格高度绑定。
• max-height:inherit/100vh未解决Grid行高度不匹配的核心问题，nav内容仍会超出单元格高度。
• 未全局设置box-sizing:border-box，部分元素的padding/border可能额外增加总高度，导致溢出。

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