Flexbox实现：可变内容元素滚动且不占用剩余空间的方案

需求回顾 #

• 黄色Div内容增多时推动红色Div，但红色Div始终完全可见，不会超出页面边缘
• 黄色Div内容过多时自动变为可滚动状态，红色Div保持可见
• 黄色Div仅占用自身实际内容所需空间，内容较少时红色Div紧随其下，不会被推至容器底部

问题根源 #

当前代码中黄色Div的flex: 1 1 0配置会让它强制占据容器的剩余空间，这就导致内容较少时，红色Div被挤到容器底部，不符合需求。

修改方案 #

核心是调整黄色Div的flex属性，将其改为flex: 0 1 auto，同时保留min-height: 0和overflow: auto以确保内容过多时能正常滚动。

代码解释

• flex-grow: 0：禁止黄色Div主动扩展占用容器剩余空间，仅保留自身内容所需高度
• flex-shrink: 1：当容器空间不足时，黄色Div会自动收缩，配合overflow: auto触发滚动
• min-height: 0：突破Flex元素默认的最小高度限制，确保收缩时能正常触发滚动逻辑

修改后的完整代码 #

CSS代码

.page {
  height: 120px;
  width: 300px;
  display: flex;
  flex-direction: column;
  border: 4px solid gray;
  padding: 10px;
}

.yellow {
  flex: 0 1 auto; /* 关键修改：取消自动占用剩余空间 */
  overflow: auto;
  min-height: 0;
  border: 4px solid #F7B64C;
  padding: 10px;
  margin-bottom: 10px;
}

.red {
  border: 4px solid #F05467;
  padding: 10px;
}

HTML代码

Example 1: 黄色Div内容过多时自动滚动，红色Div保持可见
<div class="page">
  <div class="yellow">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="red"></div>
</div>
<br/>
<br/> Example 2: 黄色Div内容较少时，红色Div紧随其下
<div class="page">
  <div class="yellow">
    Lorem ipsum dolor sit amet.
  </div>
  <div class="red"></div>
</div>

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