Grid布局中内容溢出网格容器的问题咨询

• 容器高度与网格行高度矛盾：.mn2设置了固定高度50vh，但两行网格行各占30vh，加上行间距5px，总高度远超容器高度，导致网格区域被挤压，内容易溢出。
• 网格项无溢出控制：即使网格行高度合理，当文本内容超出网格盒子高度时，没有设置溢出处理规则，内容会直接超出边界。

方案1：移除容器固定高度（推荐，适合无需限制容器高度的场景） #

删掉.mn2的height:50vh，让容器根据网格行和内容自动调整高度，从根源避免高度冲突：

.mn2 {
  display: grid;
  grid-template-columns: 30vh 30vh;
  grid-template-rows: 30vh 30vh;
  grid-gap: 5px 5px;
  border: 3px dashed red;
}

方案2：调整网格行高度适配容器（适合必须限制容器高度的场景） #

使用calc计算每行高度，或者用fr单位让行自动分配容器剩余空间：

用calc精确计算 #

.mn2 {
  display: grid;
  grid-template-columns: 30vh 30vh;
  grid-template-rows: calc((50vh - 5px)/2) calc((50vh - 5px)/2);
  grid-gap: 5px 5px;
  height: 50vh;
  border: 3px dashed red;
}

用fr单位自动分配 #

.mn2 {
  display: grid;
  grid-template-columns: 30vh 30vh;
  grid-template-rows: 1fr 1fr;
  grid-gap: 5px 5px;
  height: 50vh;
  border: 3px dashed red;
}

方案3：给网格项添加溢出处理（避免内容超出网格盒子） #

给所有网格子项设置溢出规则，即使内容过多也不会撑破盒子：

.mn2 > div {
  overflow: auto; /* 内容超出时显示滚动条，可按需换成overflow:hidden隐藏内容 */
  padding: 8px; /* 可选，优化文本与盒子边界的间距 */
}

该方案可与方案2结合使用，既适配容器高度，又控制内容溢出。

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