CSS嵌套Grid布局溢出问题求助：子元素无法自适应父网格

问题背景 #

实现嵌套Grid布局时，子div无法适配父网格空间，内容不断向下挤压导致整体超出屏幕。需求是所有子网格保持2列布局，子元素自适应父网格，整体内容适配屏幕。尝试过设置100%高度、1fr布局仍存在溢出问题。

核心问题分析 #

• 外层.grid虽限制了100vh高度，但内部.parent-container未定义合理的网格行分配，导致子网格内容不受高度限制。
• .parent-container中误用flex属性flex-direction:column，它作为grid容器该属性无效。
• 子网格.parent-grid未设置高度限制，内容会无限撑开父容器。

具体修改步骤 #

1. 修复.parent-container的网格布局

   • 移除无效的flex-direction:column
   • 添加grid-template-rows: auto 1fr：让标题自动适配高度，子网格占剩余空间
   • 添加min-height: 0：打破Grid默认的内容撑开行为，允许子元素被高度限制

2. 限制.parent-grid的高度并处理溢出

   • 设置height: 100%：让子网格填满父容器分配的空间
   • 添加overflow-y: auto：当内容过多时显示垂直滚动条，避免撑破容器

3. 确保.child元素适配父网格

   • 添加min-height: 0：防止内部内容撑高子元素，确保其能被父网格的1fr限制

修改后的完整CSS代码 #

.grid {
  display: grid;
  height: 100vh;
  width: 100vw;
  max-height: 100vh;
  max-width: 100vw;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 20px;
  background-color: lightblue;
  grid-template-areas: "area1 area2 area2" "area3 area4 .";
  box-sizing: border-box; /* 避免padding导致宽度溢出 */
}

.parent-container {
  display: grid;
  grid-template-rows: auto 1fr; /* 定义行分配 */
  min-height: 0; /* 允许子元素被高度限制 */
  background-color: green;
  gap: 10px; /* 标题和子网格之间的间距 */
  padding: 10px; /* 内边距提升视觉效果 */
  box-sizing: border-box;
}

.parent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 10px;
  background-color: rgb(66, 77, 77);
  height: 100%; /* 填满父容器空间 */
  overflow-y: auto; /* 内容过多时滚动 */
  box-sizing: border-box;
}

.child {
  display: grid;
  background-color: red;
  padding: 20px;
  min-height: 0; /* 防止内部内容撑高 */
  box-sizing: border-box;
}

补充说明 #

• 新增box-sizing: border-box：确保padding和border不会增加元素的总宽高，避免布局溢出。
• 若不需要滚动条、希望子元素自动压缩高度，可将.parent-grid的overflow-y:auto替换为grid-template-rows: repeat(auto-fill, minmax(0, 1fr))，但此方式可能导致内部文字截断，需根据需求选择。

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