Flex布局下设置overflow:scroll仍溢出，如何实现底部固定上部自适应

问题根源 #

当前代码存在三个核心问题导致布局不符合预期：

• .modalContents没有设置高度，默认由内容撑开，无法占满父容器.modal的固定高度
• Flex弹性容器的子项默认min-height属性值为auto，当内容高度超过容器可用高度时会自动撑开容器，导致overflow: scroll规则无法触发
• .topContents没有设置弹性增长属性，无法自动填充.modalContents的剩余高度

修改后代码 #

仅需修改CSS部分即可，HTML无需调整：

.modal {
  border: 3px dotted green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  overflow: hidden; /* 新增：禁止容器整体内容溢出 */
}

.modalContents {
  display: flex;
  flex-direction: column;
  height: 100%; /* 新增：撑满父容器的全部高度 */
}

.topContents {
  border: 1px solid red;
  overflow: auto; /* 可保留原scroll值，auto仅在内容溢出时显示滚动条，体验更好 */
  flex: 1; /* 新增：自动占满弹性容器的剩余可用高度 */
  min-height: 0; /* 新增：覆盖Flex子项默认的min-height: auto规则，避免容器被长内容撑开 */
}
  
.bottomContents {
  border: 1px solid blue;
  flex-shrink: 0; /* 可选新增：避免底部区域被挤压变形 */
}

效果说明 #

修改后即可实现需要的布局效果：

• .bottomContents固定在.modal容器底部，不会被挤压
• .topContents自动占满.modal剩余的全部高度
• 当.topContents内容过长时，会自动触发内部滚动，不会导致整体内容溢出.modal容器

内容的提问来源于stack exchange，提问作者central.dogma