Flex子元素为何优先遵循max-height而非min-height:100%？

你的问题核心在于百分比高度的计算依赖规则，以及Flex布局下容器高度的特殊性，和min-height/max-height的约束逻辑：

1. 百分比高度需要明确的父元素高度基准 #

当你给.left设置min-height: 100%时，这个百分比是相对于父元素（.wrapper）的计算高度来取值的。但初始代码里的.wrapper没有设置固定高度，它的高度是由子元素（.right的300px高度）撑开的，属于auto高度。根据CSS规范，子元素的百分比高度在父元素高度为auto时无法被解析为有效数值，此时min-height:100%等价于min-height:auto，自然不会生效。

2. Flex容器的高度计算逻辑 #

Flex容器在未设置显式高度时，会采用“内容驱动”的高度计算方式：容器高度由最高的子元素决定。但这种动态撑开的高度无法作为子元素百分比高度的基准——只有当父元素有显式定义的高度（比如固定像素值、100vh等）时，子元素的百分比高度才能被正确计算。这就是为什么你给.wrapper设置固定高度后，min-height:100%能正常生效的原因。

3. min-height与max-height的约束规则 #

你提到的“min-height优先级高于max-height”并不准确，正确的逻辑是：

• 当min-height的有效计算值大于max-height时，max-height会被忽略，元素最终高度取min-height；
• 反之，元素高度会被限制在max-height范围内。

当你把min-height改成固定值（比如250px）时，这个值是独立的有效尺寸，和max-height:200px比较后，250px更大，所以max-height被覆盖；但min-height:100%因为无法解析出有效数值，相当于没有设置，所以元素高度遵循max-height:200px的限制。

验证示例 #

给Flex容器添加显式高度后，min-height:100%就能正常生效：

.wrapper {
  display: flex;
  width: 100%;
  height: 300px; /* 显式定义高度 */
}

此时.left的min-height:100%被解析为300px，大于max-height:200px，所以.left最终高度为300px，覆盖了max-height的限制。

替代方案 #

如果不想给容器设置固定高度，但希望.left至少和.right等高，可以利用Flex布局的默认拉伸特性：

.left {
  background-color: red;
  width: 100%;
  max-height: 200px;
  /* align-self: stretch; 默认值，可省略 */
}

此时.left会被拉伸到和.right一样的300px，但受max-height:200px限制，最终高度为200px。如果需要让.left高度至少等于容器高度（当容器被父元素撑开时），可以给容器设置height: 100%（前提是容器的父元素也有明确高度），再配合.left的min-height:100%。

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