display: grid父容器下子div为何占满100%高度？如何让子高度随内容适配？

问题根因 #

你当前子元素自动占满父容器高度的核心原因是父grid容器的grid-template-rows: 1fr配置，fr单位会按比例分配父容器的可用空间，所以该行高度直接撑满了父容器的100%高度，而grid子元素默认的对齐规则是拉伸占满所在网格区域的高度，最终就出现了你看到的效果。

两种解决方案 #

方案1：修改父容器行模板配置（适合可以调整父grid规则的场景）

把.parent里的grid-template-rows: 1fr替换为min-content或者auto，两种配置在单一行的场景下效果一致，都会让网格行的高度由行内内容的实际高度决定，不会主动撑满父容器。
修改后的CSS代码：

.parent {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 把1fr替换为min-content */
  grid-template-rows: min-content;
  gap: 0;
}

方案2：修改子元素对齐规则（适合不能调整父grid规则的场景）

如果父容器的行模板配置不能修改，只需要给.child添加align-self: start，让子元素在网格行内顶部对齐，不再默认拉伸占满行高，高度自然就由自身内容决定。
修改后的CSS代码：

.child {
  width: 100%;
  display: flex;
  background: red;
  /* 新增这一行即可 */
  align-self: start;
}

方案差异说明 #

• 方案1会让整个网格行的高度收缩到内容高度，父容器剩余的高度会留空
• 方案2的网格行高度仍然会占满父容器100%，只是子元素自身高度收缩，你可以根据实际业务需求选择对应方案

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