CSS百分比min-height仅在存在display:flex间接父级时生效问题

核心原因 #

这是CSS中百分比高度的计算规则和flex布局的特殊行为共同导致的：

• 常规文档流中，元素设置百分比形式的height/min-height/max-height时，需要父元素有明确设置的高度值才能生效。如果父元素的高度是由子元素内容撑开的，没有显式声明height属性，那么百分比高度会直接失效，元素高度由自身内容决定，空元素高度就是0。
• 当元素是flex容器的子元素（flex项）时，即使没有显式设置高度，flex布局在计算阶段就会确定flex项的具体高度值，这个高度会被判定为「确定值」，所以flex项的子元素的百分比高度就可以基于这个值正常计算。

两种场景具体解释 #

场景1：#main未设置display:flex（常规流状态） #

对应代码：

#main {
/*   display: flex */
}

#wrapper {
  background-color: violet;
}

.content {
  font-size: 2em;
}

#inner {
  min-height: 50%;
  background-color: green;
}

<div id="main">
  <div id="wrapper">
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div id="inner"></div>
  </div>
</div>

计算逻辑：

1. #main的高度由子元素#wrapper的高度撑开，#wrapper的高度默认由自身所有子元素的总高度决定
2. #inner设置min-height:50%，但#wrapper没有显式设置高度，高度是由三个.content的高度撑开的，所以#inner的百分比高度失效，自身为空所以高度为0
3. 最终#wrapper、#main的高度都等于三个.content的总高度

场景2：#main设置display:flex（flex布局状态） #

对应代码：

#main {
  display: flex;
}

#wrapper {
  background-color: violet;
}

.content {
  font-size: 2em;
}

#inner {
  min-height: 50%;
  background-color: green;
}

<div id="main">
  <div id="wrapper">
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div id="inner"></div>
  </div>
</div>

计算逻辑：

1. #wrapper作为flex容器#main的直接子元素（flex项），它的高度在flex布局计算流程中会被确定为具体数值，即使没有显式设置height
2. 此时#inner的min-height:50%就可以基于#wrapper的确定高度计算，得到有效高度，绿色背景可见

补充现象说明 #

当#inner内部有内容时，即使在常规流中百分比高度失效，#inner的高度也会被自身内容撑开，这部分高度自然会被算入#wrapper、#main的总高度，属于常规文档流的默认高度计算规则。 #

解决方案 #

如果需要在不使用flex的场景下让#inner的百分比高度生效，只需要给#wrapper显式设置高度即可，示例：

#wrapper {
  background-color: violet;
  /* 显式设置高度，子元素的百分比高度即可生效 */
  height: 800px;
}

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