🛠 Flexbox 패널, 왜 갑자기 오버플로우 터졌냐구요? (feat. min-height: 0)

🌀 문제 상황

처음엔 모든 게 좋았습니다.

• 패널 레이아웃은 깔끔했고,
• 리스트도 알맞게 스크롤됐고,
• 헤더와 푸터도 착하게 자리잡고 있었어요.

그런데... 어느 날부터

"패널 내용이 화면을 뚫고 나온다" 😱

• 리스트가 무한정 길어지고,
• 스크롤은 안 생기고,
• 푸터는 눌리고,
• 화면은 무너지고...

"아니, 나 코드 안 건드렸는데 왜 이래??"

라고 당황했죠.

---

🔥 원인 분석

1. Flexbox와 콘텐츠 크기의 변화

처음에는 리스트에 데이터가 많지 않아서 문제가 발생하지 않았습니다.

Flexbox의 기본 동작 덕분에 약간의 오버플로우는 자연스럽게 처리되었어요.

하지만 데이터 양이 늘어나면서,

• 내부 콘텐츠 높이가 예상보다 커졌고
• flex-grow, overflow-auto 조합만으로는 커버가 안 됐습니다.

결국 부모 컨테이너(Pannel)가 컨텐츠 크기를 이기지 못하고 터진 것입니다.

---

2. min-height: 0의 부재

Flexbox 아이템은 기본적으로

"내 최소 높이(min-height)는 내 콘텐츠가 다 보여질 정도여야 해!"

라고 고집합니다.

그래서 아무리 overflow-auto를 줘도 스크롤이 안 생기고 그냥 부모를 밀어버립니다.

min-height: 0을 설정해줘야

"아, 필요하면 줄어들어도 돼~"

라고 Flexbox가 이해하고, 정상적으로 스크롤 처리가 됩니다.

---

3. flex-shrink 문제

헤더나 푸터 같은 고정 영역들은

flex-shrink: 0 처리를 안 해주면,

• 콘텐츠가 많아질 때
• 심지어 헤더나 푸터마저 눌려서 사라지거나 깨지는 현상이 발생합니다.

  원인	설명
  데이터가 늘어남	처음에는 리스트가 적어서 문제 없었음
  min-height: 0 부재	Flexbox 특성상, 콘텐츠 크기를 보장하려고 해서 스크롤 무시
  flex-shrink: 0 미적용	헤더, 푸터가 압축되거나 깨지는 현상 발생

처음부터 구조가 불안했는데, 데이터가 많아지면서 티가 난 거였어요.
즉, 초기에는 "운 좋게" 문제가 없었을 뿐, 구조적으로 안전한 코드가 아니었던 것입니다.

---

✂️ 그래서 수정한 내용

한 줄 요약: Flexbox에서 overflow, 스크롤, 크기 문제를 아예 근본적으로 잡았습니다.

1. Panel 수정

<div className="h-[calc(100vh-220px)] max-h-[calc(100vh-220px)] overflow-hidden">

• 패널 자체에 최대 높이 제한 + overflow 숨김 추가
• 부모 자체가 더 이상 깨지지 않음

2. PanelHeader 수정

<div className="flex-shrink-0

• 헤더는 무조건 고정 높이 유지
• 리스트가 커져도 헤더가 눌리거나 사라지지 않음

3. PanelContent 수정

<div className="flex-grow overflow-auto custom-scrollbar" style={{ minHeight: 0 }}>

• 핵심: minHeight: 0 설정
• Flexbox 안에서 스크롤 정상 작동하도록 보장

4. Footer 수정

<div className="flex-shrink-0 sticky bottom-0 z-10">

• 푸터는 항상 하단에 고정
• 스크롤이 생겨도 푸터가 스크롤되지 않음

---

🎯 최종 구조 요약

Panel (flex, overflow-hidden)
 ├─ PanelHeader (flex-shrink-0)
 ├─ PanelContent (flex-grow, overflow-auto, minHeight: 0)
 │    └─ 리스트 아이템들
 └─ Footer (flex-shrink-0, sticky bottom)

---

📢 결론

✅ Flexbox는 min-height: 0 없으면 스크롤 제대로 안 됨

✅ 데이터 적을 때는 안 터지지만, 나중에 대참사 날 수 있음

✅ 헤더/푸터는 flex-shrink: 0 꼭 넣자

✅ 스크롤 컨트롤은 항상 overflow-hidden, overflow-auto를 확실히 명시하자

"나는 min-height: 0 없으면 flexbox 안 믿는다"

라고 생각하면 마음이 편해집니다.

---

✨ 작은 교훈

• 처음에 잘 된다고 안심하지 말기
• "데이터 10배 많아지면 깨질까?" 상상해보기
• Flexbox랑 스크롤 다루는 건 언제나 조심 또 조심