如何用Flexbox设计含固定Header、动态高度Main的100vh滚动布局

直接上解决方案，核心是利用Flexbox的空间分配特性，结合overflow属性实现内部滚动：

核心布局逻辑 #

• 外层容器.modal设置为垂直方向的Flex容器，高度占满视口（100vh），同时隐藏自身溢出避免页面整体滚动
• Header元素不设置固定高度，由内部内容自动撑开
• Main元素通过flex: 1占据容器剩余所有空间，再用overflow: auto实现内容过长时内部滚动，内容不足时自动填充剩余区域

完整代码示例 #

<div class="modal">
  <header class="modal-header">
    动态高度Header<br>
    支持多行内容自适应
  </header>
  <main class="modal-main">
    <!-- 以下为测试用的大量内容 -->
    <div class="content-item">测试滚动内容 1</div>
    <div class="content-item">测试滚动内容 2</div>
    <div class="content-item">测试滚动内容 3</div>
    <div class="content-item">测试滚动内容 4</div>
    <div class="content-item">测试滚动内容 5</div>
    <div class="content-item">测试滚动内容 6</div>
    <div class="content-item">测试滚动内容 7</div>
    <div class="content-item">测试滚动内容 8</div>
    <div class="content-item">测试滚动内容 9</div>
    <div class="content-item">测试滚动内容 10</div>
    <div class="content-item">测试滚动内容 11</div>
    <div class="content-item">测试滚动内容 12</div>
    <div class="content-item">测试滚动内容 13</div>
    <div class="content-item">测试滚动内容 14</div>
    <div class="content-item">测试滚动内容 15</div>
  </main>
</div>

/* 全局重置默认边距，避免影响布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.modal {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden; /* 禁止容器自身溢出，避免页面整体滚动 */
}

.modal-header {
  background-color: #e0e0e0;
  padding: 1.2rem;
  font-size: 1.1rem;
}

.modal-main {
  flex: 1; /* 占据容器剩余所有空间 */
  overflow: auto; /* 内容超过高度时显示滚动条 */
  background-color: #90ee90; /* 对应需求中的绿色区域 */
  padding: 1rem;
}

/* 测试内容样式，可根据实际需求调整 */
.content-item {
  padding: 1rem;
  border-bottom: 1px solid #ddd;
  margin-bottom: 0.5rem;
}

关键属性说明 #

• flex-direction: column：将Flex容器的子元素设置为垂直排列
• flex: 1：等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，让Main元素自动填充Header以外的剩余空间
• overflow: auto：仅当Main内部内容高度超过分配的空间时，才显示垂直滚动条，保证内容不足时填满剩余区域
• overflow: hidden（给.modal）：防止容器因为子元素溢出而产生页面级滚动条，确保滚动仅发生在Main内部

内容的提问来源于stack exchange，提问作者Daniel Turuș