使用overflow-y:scroll时div无法正确处理溢出的问题排查

核心实现：Flexbox弹性布局+局部滚动 #

通过弹性布局让容器自动填充可用空间，无需固定单位，同时实现内容区的局部滚动，适配顶部可变元素（如banner/alert）的场景：

1. 页面基础布局设置
   确保根元素占满可用空间，外层容器采用垂直弹性布局：

   html, body {
     height: 100%;
     margin: 0;
     padding: 0;
   }
   .app-wrapper {
     display: flex;
     flex-direction: column;
     height: 100%;
   }
   

2. 顶部可变元素适配
   顶部alert/banner设置为不收缩，自动适应自身内容高度：

   .alert {
     flex-shrink: 0;
     padding: 1rem;
     background: #ffeeba;
   }
   

3. 主内容两栏结构
   主内容容器采用水平弹性布局，占据页面剩余所有空间，同时限制溢出避免页面滚动：

   .main-content {
     display: flex;
     flex: 1;
     overflow: hidden;
   }
   

4. Sidebar自适应高度
   Sidebar设置为不收缩，宽度可按比例或内容自适应，自动填满主内容区高度：

   .sidebar {
     flex-shrink: 0;
     flex-basis: 20%; /* 按比例分配宽度，也可根据需求调整 */
     background-color: #f8f9fa;
     padding: 1rem;
   }
   

5. 内容区局部滚动实现
   Tab内容容器采用垂直弹性布局，让面板区域占据剩余高度，仅在内容过多时显示滚动条：

   .tab-container {
     flex: 1;
     display: flex;
     flex-direction: column;
     overflow: hidden;
   }
   .tab-content {
     flex: 1;
     overflow-y: auto;
     padding: 1rem;
   }
   

关键逻辑说明 #

• 全程使用Flexbox的弹性分配，未使用px或vh固定单位，能自动适配顶部元素出现/消失的场景
• 通过overflow: hidden限制主内容区的整体溢出，再给tab内容容器设置overflow-y: auto，实现仅内容区局部滚动，sidebar始终固定在视口内不随页面滚动
• 确保所有父容器的高度通过Flex属性传递，避免高度塌陷导致的布局混乱

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