为何已设置min-height仍需指定height才能使自定义元素内部Grid布局生效？

这个问题的核心原因是CSS规范中height: 100%的生效限制，以及高度计算的「明确性要求」，我来一步步拆解给你看：

1. height: 100%的生效前提：父元素必须有「明确高度」 #

CSS规范中，height: 100%的生效有一个硬性要求：父元素的高度必须是definite（明确、可确定的）——也就是父元素的高度是通过height属性直接指定的固定值，或者能通过父链向上找到一个明确的高度参考。

而你设置的min-height: 64px属于**indefinite（不确定）**的高度类型：它只是定义了元素高度的下限，但没有给出一个固定的、明确的高度值（元素高度可以随内容无限增高）。因此即使你设置了min-height，宿主元素的高度依然是“不确定”的，子元素.container的height: 100%无法获取到有效的参考值，只能被解析为0，Grid布局自然无法生效。

2. 为什么设置height: 0能解决问题？ #

当你给:host添加height: 0后，宿主元素的高度就变成了明确的固定值0，此时min-height: 64px会强制将元素高度提升到64px——这个64px就成为了一个符合要求的「明确高度」。

此时.container的height: 100%就能明确继承到64px的高度，Grid布局的grid-template-rows: 1fr 10%也就能基于这个固定高度计算出每一行的实际像素值，布局自然正常显示。

3. 更合理的替代解决方案（无需依赖height: 0） #

除了设置height: 0，你可以通过以下方式打破这个限制：

方案一：让宿主元素的高度明确化

给:host设置固定高度或继承父元素的明确高度：

:host {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid black;
  min-width: 64px;
  min-height: 64px;
  height: 64px; /* 直接设置固定值，或继承父元素高度：height: 100% */
}

方案二：去掉height: 100%，让Grid布局直接继承min-height

修改.container的样式，直接继承宿主的min-height，不再依赖百分比高度：

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 10%;
  width: 100%;
  min-height: inherit; /* 直接继承宿主的min-height */
  /* 移除 height: 100%; */
}

方案三：改用Flex布局打破循环

利用flex布局的自动填充特性，让子元素自动撑满宿主高度：

:host {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid black;
  min-width: 64px;
  min-height: 64px;
  display: flex; /* 改为flex容器 */
}

.container {
  flex: 1; /* 自动撑满宿主的可用空间 */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 10%;
  width: 100%;
}

总结 #

本质上是CSS规范对百分比高度的严格限制导致的：只有父元素有明确的高度值时，子元素的百分比高度才能生效。min-height只能限制高度下限，但无法提供height: 100%所需的明确高度参考，因此需要通过设置height属性或其他布局方式打破这个循环。

内容来源于stack exchange