CSS Flexbox设置height:90%却塌陷，求底层原理解析

问题背景 #

开发Bullpen（LinkedIn又称Queens）游戏解算器前端时，左侧颜色面板（#palette）设置了min-height: min(90%, 90vw)，预期高度为祖父容器#main-content的90%，但实际渲染后面板塌陷。希望理解CSS底层运行机制，不直接更换单位来修复。

底层原因：百分比高度的生效规则 #

核心问题出在百分比高度的计算依赖父元素的明确高度值，你的布局中存在以下连锁失效：

1. #main-content使用flex-grow: 1填充body的剩余空间，但flex-grow仅负责分配弹性空间，不会给元素设置明确的height属性值——它的高度是隐式计算的（由内容+弹性分配决定），不属于“明确高度”。
2. 父元素#left-column设置了height: 100%，但由于#main-content没有明确高度，这个百分比无法获取有效参考值，因此#left-column的高度实际由子元素#palette的内容决定（塌陷为内容高度）。
3. #palette的min-height: min(90%, 90vw)中，90%是相对于#left-column的高度，但#left-column已塌陷，所以这个百分比失去意义，只能取90vw；当窗口宽度足够大时，90vw会远小于预期的容器高度，最终导致面板塌陷。

修复方案（贴合需求，不换单位） #

方案1：给#main-content设置明确高度 #

利用body是flex容器的特性，给#main-content添加height: 100%，让它继承body的可用高度（即100vh减去header的7rem）：

#main-content {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  height: 100%; /* 新增这行 */
}

此时#left-column的height: 100%有了明确的父元素高度参考，#palette的90%就能正确计算为#main-content高度的90%。

方案2：利用Grid布局的拉伸特性 #

调整#left-column的Grid布局，让子元素自动占满容器空间，避免依赖百分比高度的计算：

.spacing-column {
  display: grid;
  justify-content: center;
  align-content: stretch; /* 将align-content从center改为stretch */
  height: 100%;
}

#palette {
  /* 保留其他属性，将min-height改为90% */
  min-height: 90%;
}

align-content: stretch会让Grid容器交叉轴方向的子元素自动占满容器空间，此时#palette的90%就能基于#left-column的完整高度计算。

关键知识点总结 #

• 百分比高度仅在父元素有明确的非auto高度值时生效，这个高度值可以是绝对单位（px、vh）或能追溯到绝对单位的百分比。
• flex-grow、grid-template-rows等弹性布局属性不会给元素设置明确的height，因此无法作为百分比高度的参考。
• Grid/Flex布局的拉伸特性（如align-content: stretch、flex: 1）可以替代百分比高度，实现自适应空间分配，且不受百分比高度规则限制。

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