Flex布局下父div固定上下区域后中间区仅内容滚动实现方法

修改方案 #

你需要对HTML和CSS做如下调整即可实现需求：

1. 给中间div内h1下方所有需要滚动的内容套一个独立的容器
2. 将中间div也设置为纵向flex布局，把滚动属性从中间div移到新增的内容容器上
   另外原代码里两个固定高度区域用了重复的id，不符合HTML规范，同步调整为类名实现。

修改后的完整CSS代码

#outer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fixed-area {
    height: 150px;
    background-color: grey;
}

#inner_remaining {
    background-color: #DDDDDD;
    flex-grow: 1;
    /* 新增：中间容器设为纵向flex布局 */
    display: flex;
    flex-direction: column;
}

/* 新增：滚动内容区域样式 */
.scroll-content {
    flex-grow: 1;
    overflow-y: auto;
}

修改后的完整HTML代码

<div id="outer">
   <div class="fixed-area">
      我是固定高度区域
   </div>
   <div id="inner_remaining">
      <h1>
         我需要固定不滚动
      </h1>
      <!-- 新增滚动内容包裹容器 -->
      <div class="scroll-content">
        <h2>
           我需要参与滚动
        </h2>
        <h2>
           我需要参与滚动
        </h2>
        <h2>
           我需要参与滚动
        </h2>
        <h2>
           我需要参与滚动
        </h2>
        <h2>
           我需要参与滚动
        </h2>
      </div>
   </div>
   <div class="fixed-area">
      我是固定高度区域
   </div>
</div>

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