如何让高度自适应的CSS Grid容器贴合内容？

你的两个CSS Grid容器出现重叠，核心问题出在Grid行模板设置错误和未全局配置box-sizing，导致容器无法正确从子元素获取高度，具体修复方案如下：

问题根源拆解 #

1. grid-template-rows: repeat(auto-fit, 1fr) 是错误用法：auto-fit 仅适用于列模板的自适应填充，用于行模板会导致浏览器无法正确计算行高，容器高度塌陷。
2. 未设置全局box-sizing: border-box：元素的边框、内边距会额外占用空间，可能干扰容器尺寸计算。
3. block-size: min-content 限制了容器高度，配合错误的行模板，进一步导致容器无法撑开。

修复步骤及修改后代码 #

1. 添加全局box-sizing样式 #

确保所有元素的尺寸计算包含边框和内边距，避免尺寸溢出。

2. 修正Grid行模板 #

用grid-auto-rows: 1fr替代错误的行模板设置，让浏览器自动生成行并适配内容高度。

3. 调整容器高度属性 #

将block-size: min-content改为auto，恢复容器自适应内容高度的默认行为。

修改后的完整CSS代码：

/* 全局样式：统一尺寸计算规则 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flexgrid {
  display: grid;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* 替换错误的行模板，自动生成自适应行高 */
  grid-auto-rows: 1fr;
  column-gap: 1vw;
  row-gap: 1vh;
  container-type: size;
  /* 让容器完全由内容撑开高度 */
  block-size: auto;
  min-height: 50px;
}

ul.flexgrid {
  list-style-type: none;
}

.flexgrid > * {
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: 100cqw;
}

.marker-red {
  border: 1px solid #f00;
  margin-bottom: 1rem; /* 可选：添加底部间距，优化视觉间距 */
}

.marker-green {
  border: 1px solid #0f0;
}

.horz50 {
  width: 50%;
}

HTML代码无需修改，保持原有结构即可。

修复效果说明 #

• 全局box-sizing确保所有元素的边框、内边距不会额外增加尺寸，避免容器被撑破或尺寸错位。
• grid-auto-rows: 1fr让Grid每行高度均分可用空间，同时容器会根据子元素的总高度自动调整自身高度，彻底解决重叠问题。
• block-size: auto让容器完全由内部内容的高度决定，不会出现高度塌陷。

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