Flexbox布局下overflow:auto不生效 模态框滚动条异常问题

布局失效来自两个CSS Flex规则的默认行为：

• 你额外用一层无样式的<div>包裹了.modal-header和.modal-body，这个div作为.modal的flex列子项，默认min-height: auto，会完全被内部内容撑开，无视父容器设置的max-height限制，最终带着内部的body元素溢出模态框容器。
• 即使移除这层多余包裹，flex列布局下的滚动子项如果没有显式设置flex收缩规则，也会因为默认最小尺寸约束无法触发overflow: auto的滚动逻辑。

1. 删除HTML中包裹.modal-header和.modal-body的多余无意义<div>，让.modal-header、.modal-body、.modal-actions三个元素直接作为.modal容器的直接子元素，匹配flex列布局的层级要求。
2. 给.modal-body增加flex: 1 1 auto属性，显式声明该元素可以占据flex容器剩余空间、允许在空间不足时收缩，确保它的高度被父容器的max-height严格约束，内容溢出时自动出现滚动条。

<div id="modal">
  <div class="modal">
    <div class="modal-header">header (no scroll/fixed)</div>
    <div class="modal-body">
      This element should scroll when overflow<br>body<br>body<br>body<br>body<br>body<br>body<br>body<br>body<br>body
    </div>
    <div class="modal-actions">actions (no scroll/fixed)</div>
  </div>
</div>

#modal{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display:flex;
}

.modal{
    margin:auto;
    padding:20px;
    max-height:calc(100% - 40px);
    width:500px;
    display:flex;
    flex-flow:column nowrap;
    justify-content:space-between;
    align-items:stretch;
    background:#ddd;
}

.modal-header{
    padding-bottom:10px;
    background:white;
}

.modal-body{
    overflow:auto;
    min-height:60px;
    /* 新增flex属性，约束元素在flex容器内的尺寸规则 */
    flex: 1 1 auto;
}

.modal-actions{
    padding-top:10px;
    text-align:right;
    background:yellow;
}

修复后效果：窗口尺寸缩小时，头部和操作栏始终固定在模态框上下位置，只有中间body区域内容溢出时出现滚动条，不会再出现整体溢出父容器的问题。

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