如何实现段落固定不滚动、仅列表滚动的嵌套滚动布局？

需求说明 #

需要实现以下布局效果：

• 主布局包含固定在顶部的header，不会随内容滚动
• main区域内的段落（<p>）始终固定在main区域顶部，不随下方内容滚动
• 仅main区域内的列表项部分可滚动
• 不能移除div.mywrap元素

当前问题：header已固定，但无法实现main内段落固定、仅列表滚动的效果。

解决方案 #

核心思路是将main容器改为垂直方向的flex布局，让固定的段落部分占据自身高度，滚动区域自动填充剩余空间并设置专属滚动属性。具体修改如下：

1. 调整main的布局方式：将main设置为flex-direction: column的flex容器，使内部固定段落和滚动区域垂直排列
2. 移除main的overflow属性：避免整个main区域滚动，让滚动仅作用于列表部分
3. 设置滚动区域的高度规则：给.scrollable添加flex-grow: 1使其填充main的剩余空间，并设置overflow-y: auto（仅垂直滚动，优化视觉体验）

修改后的完整代码 #

CSS

* {
  box-sizing: border-box;
}

header {
  background-color: red;
  /* 固定header高度，不随内容拉伸 */
  flex-shrink: 0;
}

p {
  background-color: blue;
  /* 段落区域固定高度，不压缩 */
  margin: 0;
  flex-shrink: 0;
}

.mywrap {
  display: flex;
  flex-direction: column;
  max-height: 400px;
  /* 确保容器占满可用高度，可选 */
  height: 100vh;
}

main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* 移除main的overflow，让滚动仅在.scrollable内 */
}

.scrollable {
  flex-grow: 1;
  overflow-y: auto;
  /* 可选：添加内边距优化视觉 */
  padding: 8px;
}

HTML

<div class="mywrap">
<header>
  IM a HEADER and I ALWAYS want to be ON TOP
</header>
<main>
  <section class="aot">
    <p>
       I want this paragraph to NOT TO SCROLL DOWN and be on top as well
    </p>
  </section>
  <section class='scrollable'>
  <div>
   scrollable item
  </div>
    <div>
   scrollable item
  </div>
    <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
   scrollable item
  </div>
  <div>
  scrollable item </div>
  </section>
</main>
</div>

效果说明 #

• header固定在页面顶部，不会随内容滚动
• main内的蓝色段落固定在main区域顶部，始终可见
• 仅.scrollable区域内的列表项可垂直滚动，超出容器高度时自动显示滚动条
• 保留了div.mywrap元素，符合需求限制

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