CSS包含块具体如何确定？min-height与flex场景下百分比高度生效疑问

1 普通流块级元素的百分比高度计算规则 #

根据CSS 2.1规范，块级元素使用百分比高度时，要求其包含块的height属性为显式指定的非auto值，仅设置min-height/max-height不算显式指定高度：

• 第一个示例里的.outer仅设置了min-height: 200px，本身的height属性仍然是默认值auto，高度由内部内容实际高度撑开
• overflow: hidden的作用仅为裁剪溢出内容，完全不影响父元素本身的高度计算逻辑，也不会改变父元素height: auto的属性状态，所以子元素的height: 100%找不到可参考的确定高度，自然不会生效
• 你之前认为的「循环依赖」只和BFC的边距折叠、高度计算逻辑有关，和百分比高度的参考规则无关，哪怕开启BFC也不会改变百分比高度对父元素height属性的要求。

2 Flex布局下的高度计算特殊规则 #

当元素作为flex容器主轴线（示例中flex-direction: column，主轴线为垂直方向）的子项时，高度计算规则和普通流完全不同：

• 第二个示例里body设置了height: 100vh，是显式的确定高度，作为flex容器它的可用垂直高度是明确的
• .outer作为flex容器的唯一子项，会在flex布局阶段确定最终高度：首先满足min-height: 200px的下限要求，且因为没有设置flex-shrink/flex-grow的特殊值，最终高度为确定的有效值，不再是普通流下的auto状态
• 此时.outer的高度是确定值，所以子元素.inner的height: 100%就有了参考基准，可以正常生效。

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