Flex-1 布局实现内部滚动条

一、核心区别

	‌min-h-0‌	‌shrink-0‌
‌作用‌	允许内容压缩（纵向控制）	禁止自身收缩（横向控制）
‌场景‌	内部滚动条生效	固定宽度/高度不压缩

---

二、实战案例：多层滚动控制

目标：页面分三部分（顶部固定 + 中间滚动区 + 底部固定），确保滚动仅发生在中间区域，外层不滚动。

export default function Page() {
  return (
    // 外层：固定高度 + 隐藏滚动
    <div className="flex flex-col h-screen overflow-hidden">
      
      {/* 1. 顶部固定（禁止压缩） */}
      <header className="h-20 bg-yellow-200 shrink-0">顶部导航</header>
      
      {/* 2. 中间区域：占满剩余空间 */}
      <div className="flex-1 min-h-0 flex flex-col"> 
        
        {/* 中间内部标题（固定高度） */}
        <div className="h-12 bg-gray-200 shrink-0">筛选栏</div>
        
        {/* 滚动内容区（核心） */}
        <div className="flex-1 min-h-0 overflow-y-auto">
          <div className="h-[2000px] bg-blue-100">超长内容</div>
        </div>
        
        {/* 底部固定（禁止压缩） */}
        <footer className="h-16 bg-gray-200 shrink-0">底部信息</footer>
      </div>
    </div>
  );
}

---

三、关键配置解析（注释版）

// 外层容器（门卫）
<div className="h-screen overflow-hidden">  // ← ① 锁死高度，禁止外溢
  <div className="shrink-0">...</div>      // ← ② 固定块用shrink-0

  <div className="flex-1 min-h-0">          // ← ③ 剩余空间分配+允许压缩
    <div className="overflow-y-auto">      // ← ④ 滚动交给最内层
      <div className="h-[2000px]">...</div>// ← ⑤ 超长内容触发滚动
    </div>
  </div>
</div>

---

四、常见问题速查

1. 为何外层要加 overflow-hidden？ → 防止内部内容撑开页面，强制滚动仅在内层发生
2. 为何中间层要同时用 flex-1 和 min-h-0？ → flex-1 分配剩余空间，min-h-0 覆盖默认最小高度，允许内容压缩
3. 什么时候用 shrink-0？ → 侧边栏、固定头尾等不需要随容器收缩的元素