Flexbox에서 스크롤이 안 생기는 이유와 해결 방법

웹 UI를 만들다 보면, overflow-y: auto를 줬는데도 스크롤이 안 생기는 현상을 겪을 때가 있습니다.
특히 Flexbox 레이아웃 안에 스크롤 영역을 만들 때 자주 발생하죠.

최근에 저도 product-panel → product-table → table-body 구조에서
스크롤이 안 생기는 문제를 겪었는데, 그 원인과 해결 방법을 정리해 봅니다.

---

문제 상황

HTML/CSS 구조는 대략 이렇게 생겼습니다.

<div class="product-panel">
  <div class="product-table">
    <div class="table-header">헤더</div>
    <div class="table-body">
      <!-- 내용이 아주 많음 -->
    </div>
  </div>
</div>

.product-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-table {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-header {
  flex-shrink: 0;
}

.table-body {
  flex: 1;
  overflow-y: auto;
}

이렇게 하면 당연히 .table-body에 스크롤이 생길 줄 알았는데…
실제로는 스크롤이 전혀 생기지 않았습니다.

---

원인: Flexbox의 min-height 기본값

Flexbox의 자식 요소는 기본적으로 min-height: auto 값을 가집니다.
이게 무슨 뜻이냐면, 자식 콘텐츠 높이만큼 부모 높이를 늘리려 한다는 거죠.

그래서 .table-body에 overflow-y: auto를 줘도,
부모(.product-table이나 .product-panel)가 "어? 자식이 커졌네? 나도 커져야지" 하고 늘어나버립니다.
그 결과 스크롤이 아닌 전체 페이지 확장이 발생합니다.

---

해결 방법: min-height: 0 + height: 0

부모들이 자식 때문에 강제로 늘어나지 않도록 해야 합니다.
이를 위해 flexbox에서 스크롤 영역을 만들 때는 반드시 min-height: 0을 지정해야 합니다.

.product-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 중요! */
}

.product-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 중요! */
}

.table-body {
  flex: 1;
  min-height: 0; /* 중요! */
  height: 0;      /* Safari 대응 */
  overflow-y: auto;
}

---

동작 원리

• min-height: 0
  Flexbox 자식이 콘텐츠 크기에 맞춰 부모를 늘리지 않도록 막음.
• height: 0
  일부 브라우저(Safari 등)에서 스크롤이 동작하도록 강제로 높이를 0으로 설정.
• flex: 1
  남은 공간을 꽉 채우도록 설정.

이렇게 하면 .table-body는 주어진 높이 안에서만 콘텐츠를 보여주고,
넘치는 부분은 스크롤로 처리됩니다.

---

정리

• Flexbox 안에서 스크롤이 안 생기는 건 min-height: auto 때문.
• 스크롤 영역이 필요하다면 부모와 자식 모두에 min-height: 0을 꼭 넣어야 함.
• Safari 대응을 위해 height: 0도 같이 쓰면 안전.

---

💬 팁:
이 문제는 CSS Grid에서도 비슷하게 발생할 수 있습니다.
Grid를 쓸 때도 스크롤 영역에 min-height: 0을 지정하는 습관을 들이면 좋습니다.