header容器高度动态变化的原因排查（附代码场景）

这个问题的核心是Flexbox布局与普通Block布局对元素高度的计算规则差异，具体拆解如下：

1. 普通Block布局下的header行为（移除wrapper的CSS后） #

当.wrapper不是flex容器时，header是标准的block元素：

• 你设置的height: 400px是强制固定高度，无论内部内容高度是多少，header都会维持400px的高度——这是block元素的默认行为，高度由显式设置的值决定，不受内容高度影响（除非内容溢出）。

2. Flexbox布局下的header行为（保留wrapper的CSS时） #

当.wrapper设置为display: flex; flex-direction: column;后，header和main成为flex容器的flex items，此时高度计算规则完全不同：

• flex item的默认flex-shrink值为1：这意味着当flex容器的总空间（这里是100vh）不足以容纳所有flex item的设置高度时，flex item会自动收缩以适应容器。
• flex item的默认min-height值为auto：这意味着flex item的高度不能小于其内部内容的实际高度。
• 你给header设置的height: 400px会被解析为flex item的flex-basis（主轴基准尺寸，这里主轴是垂直方向），但这不是强制固定高度——只有当容器空间充足且内容高度超过400px时，header才会维持400px；如果内容高度小于400px且容器空间不足，header会收缩到内容高度。

为什么hover时header能保持400px？

当hoverLinkBar时，下拉菜单ul显示，header内部的内容高度显著增加。此时min-height: auto生效，header的高度不能小于内容高度；如果此时容器（100vh）的剩余空间足够容纳header的400px高度，flex布局就会让header维持你设置的400px，而不是收缩到内容高度。

为什么正常状态下header高度缩小？

正常状态下，ul是隐藏的，header内部内容高度远小于400px。此时flex容器的空间可能被main（设置了flex:1，会自动占据剩余空间）挤压，再加上flex-shrink:1的默认规则，header就会收缩到内容的实际高度，而不是维持400px。

解决方法（如果想让header在flex布局中始终保持400px） #

如果你希望header在flex布局中无论内容多少都维持400px高度，可以给header添加以下CSS：

header {
  height: 400px;
  border-bottom: 4px solid beige;
  flex-shrink: 0; /* 禁止header收缩 */
}

或者显式设置flex-basis并禁止收缩：

header {
  flex-basis: 400px;
  flex-shrink: 0;
  border-bottom: 4px solid beige;
}

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