CSS Flexbox中height:auto/100%与min-height/height的表现差异求助

先看示例代码：

CSS代码 #

* {
  box-sizing: border-box;
}

.flex-container {
  background-color: #ddd;
  display: flex;
  border: 2px solid#333;
  min-height: 200px;
  /* height: 200px; */
}

.flex-container > * {
  font-size: 2rem;
  color: #fff;
  font-weight: bold;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.red   { background-color: red;   }
.green { background-color: green; }
.blue  { background-color: blue;  }

.green {
  /* height: 100%; */
  /* height: auto; */
}

HTML代码 #

<div class="flex-container">
  <div class="red">R</div>
  <div class="green">G</div>
  <div class="blue">B</div>
</div>

核心原因拆解 #

• 百分比高度的计算规则：CSS里，子元素设置height: 100%时，必须依赖父元素有明确的、非auto的高度值。当父容器用min-height: 200px时，容器的实际高度是auto（由内容或flex布局自动计算的高度），此时子元素的百分比高度没有可参照的固定值，浏览器无法计算出具体高度，所以height:100%不生效。

• Flex项的默认拉伸逻辑：flex项默认的align-self: stretch属性，会让元素在交叉轴方向自动填充容器的可用空间，这是flex布局自带的特性，对应height: auto的行为——它不需要依赖父元素的固定高度，直接遵循flex布局的规则拉伸，所以能正常生效。

• 容器设height时生效的原因：当把min-height改成height:200px，父容器有了明确的固定高度值，子元素的height:100%就可以基于这个固定值计算出具体高度，自然就能拉伸到容器的高度。

总结一下：height:100%遵循的是传统CSS百分比高度的计算规则，而flex项的拉伸是布局特性，两者的生效逻辑不一样，这就是为什么会出现你看到的差异。

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