Flexbox布局问题：窗口过短时项目溢出容器且侧边栏定位异常

问题根源 #

1. 固定视高引发布局溢出：.main-screen 设置 height:100vh，但内部头部（固定90px）、网格（36vh）和侧边栏的高度总和在小视口下会超出容器，导致元素重叠。
2. Flex容器未处理溢出逻辑：.body 作为Flex容器未配置溢出规则，内容超出时直接挤压其他元素。
3. 不合理的固定高度设置：.row1、.row2 的 height:10% 基于未明确高度的父容器，导致布局计算混乱。

修复代码调整 #

修改媒体查询内的CSS如下：

@media (max-width:960px) {
    .main-screen {
      min-height: 100vh; /* 替换固定高度为最小视高，允许页面自适应内容高度 */
      display: flex;
      flex-direction: column-reverse;
      overflow: hidden;
      .toolbar {
        padding: 10px;
        height: 90px;
        width: auto;
        flex-shrink: 0; /* 固定侧边栏高度，防止被挤压 */
      }
      .body {
        flex: 1; /* 占满容器剩余空间 */
        display: flex;
        flex-direction: column;
        overflow: auto; /* 内容超出时显示滚动条 */
        .header {
          flex-shrink: 0; /* 固定头部高度，防止被挤压 */
        }
        .grid {
          flex: 1; /* 自适应剩余空间 */
          overflow: auto; /* 网格内容超出时滚动 */
          max-height: unset; /* 移除固定高度限制 */
        }
        .row1, .row2 {
          flex: 1;
          height: auto; /* 让行高由内容决定 */
          max-width: 100%;
        }
      }
    }
}

关键调整说明 #

• 用 min-height:100vh 替代 height:100vh，确保页面在内容过多时可自动扩展，同时保持最小视口高度。
• 给头部和侧边栏添加 flex-shrink:0，避免它们被其他Flex元素挤压变形。
• 让 .body 占满剩余空间并设置 overflow:auto，通过滚动条处理内容溢出，避免元素重叠。
• 移除网格的固定高度限制，改用 flex:1 自适应剩余空间，同时添加内部滚动规则。
• 将行元素的固定高度改为 auto，让内容自然决定行高，消除不合理的高度限制。

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