Flexbox布局中底部div元素缺失原因及解决方案咨询

• 核心问题出在头部下方的中间容器样式：你给该容器同时设置了flex: 1 0 auto和height: 100%
• height: 100%的计算基准是父元素的总高度，而非flex布局分配给该容器的剩余高度。这就导致中间容器直接占满了整个父容器的高度，把后续的底部footer元素挤出了可视区域
• 最外层容器还设置了overflow: hidden，溢出的footer部分直接被隐藏，因此看不到底部元素

• 直接删除中间容器的height: 100%属性即可：flex:1已经会自动让该容器占用头部之外的所有剩余高度，不需要额外指定百分比高度
• 可同时将中间容器的flex属性调整为flex: 1 1 auto，允许容器在内容不足时正常收缩，适配不同高度场景

<div style="border: 2px solid #ffd1dc; overflow: hidden; height: 100%">
  <div style="display: flex; flex-direction: column; width: 100%; height: 100%">
    <!-- 头部 -->
    <div style="flex: 0 0 auto">
      <div>
        <p>1</p>
        <p>2</p>
      </div>
    </div>
    <!-- 中间容器：删除原有的height:100%属性 -->
    <div style="flex: 1 1 auto">
      <div
        style="display: flex; width: 100%; height: 100%; flex-direction: column"
      >
        <!-- 可滚动主体 -->
        <div
          style="
            display: flex;
            flex: 1 1 auto;
            overflow: auto;
            background-color: red;
            color: rgba(0, 0, 0, 0.87);
          "
        >
          <div
            style="
              flex: 1 1 auto;
              overflow: auto;
              background-color: red;
              color: rgba(0, 0, 0, 0.87);
            "
          >
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
          </div>
        </div>
        <!-- 底部footer -->
        <div style="flex: 0 0 auto; background-color: green">
          <p>X</p>
          <p>Y</p>
        </div>
      </div>
    </div>
  </div>
</div>

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