如何让动态Header高度增加时向上扩展，固定Content位置？

需求描述 #

页面包含Header和Content区域，Header内容为动态值，当Header内容过长换行（两行及以上）时，要求Content保持固定的垂直和水平位置——即多行Header的最后一行需与单行Header的第一行处于同一垂直位置。尝试过Flexbox的flex-end等属性但未达到预期效果，现有示例代码如下：

原CSS代码 #

.main {
  display: flex;
  justify-content: center;
  min-height: 200px;
  border: 1px solid black;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid red;
  width: 200px;
  height: 300px;
  padding-top: 20px;
  gap: 20px;
}

.header-div {
  display: flex;
  border: 1px solid blue;
  align-items: center;
  text-align: center;
  max-width: 100px;
}

.header {
  border: 1px solid green;
}

.content {
  border: 1px solid green;
}

原HTML代码 #

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="main">
  <div class="wrapper">
    <div class="header-div">
      <h1 class="header">Header</h1>
    </div>
  <div class="content">Test</div>
    </div>
</div>

</body>

</html>

示意图说明：左侧为单行Header的正常效果，右侧为多行Header时的预期效果——Content位置不变，多行Header的最后一行与单行Header的第一行垂直对齐

解决方案 #

核心思路是让Header容器底部对齐，同时给Header容器设置最小高度（匹配单行Header的高度），这样当Header内容增多换行时，容器高度自动扩展，但底部始终锚定在原单行Header的位置，从而保证Content的垂直位置固定。

修改后的CSS代码 #

.main {
  display: flex;
  justify-content: center;
  min-height: 200px;
  border: 1px solid black;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid red;
  width: 200px;
  height: 300px;
  padding-top: 20px;
}

.header-div {
  display: flex;
  border: 1px solid blue;
  align-items: flex-end; /* 关键：让Header内容底部对齐容器 */
  text-align: center;
  max-width: 100px;
  min-height: 1.5em; /* 关键：设置最小高度为单行Header的高度，可根据字体大小调整 */
}

.header {
  border: 1px solid green;
  width: 100%; /* 确保Header文本居中对齐 */
}

.content {
  border: 1px solid green;
  margin-top: 20px; /* 替代原wrapper的gap，保证Content与Header容器的间距固定 */
}

修改后的HTML代码 #

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="main">
  <div class="wrapper">
    <!-- 单行Header示例 -->
    <div class="header-div">
      <h1 class="header">Header</h1>
    </div>
    <div class="content">Test</div>
  </div>

  <!-- 多行Header示例，用于对比效果 -->
  <div class="wrapper">
    <div class="header-div">
      <h1 class="header">This is a very long Header that will wrap into multiple lines</h1>
    </div>
    <div class="content">Test</div>
  </div>
</div>

</body>

</html>

关键修改说明 #

1. 给.header-div设置align-items: flex-end，让Header内容始终对齐容器底部；
2. 给.header-div添加min-height，值匹配单行Header的高度（比如1.5em，可根据实际字体大小调整），确保单行时容器高度足够，多行时自动扩展；
3. 移除.wrapper的gap属性，改用.content的margin-top控制间距，避免flex布局的gap受容器高度变化影响；
4. 给.header设置width: 100%，确保多行文本居中显示。

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