flex-1에 스크롤이 생기지 않는다면?

Posted Apr 14, 2025 Updated Apr 15, 2025

By Hajeong Kim 3 min read

❗ 문제 상황

  
<body class="h-screen flex flex-col">
  <header class="h-16 bg-gray-200">헤더</header>
  <main class="flex-1 overflow-y-auto bg-white">
    <div class="h-[2000px]">길게 넘치는 콘텐츠</div>
  </main>
</body>

위와 같은 상황에서 부모에 height도 지정했고 나머지 영역이 flex:1로 잡히는 것을 볼 수 있었다. 하지만 자식 요소가 넘쳐났을 때 영역이 늘어나기만 하고 스크롤이 생기지 않았다.

💡 문제 원인 찾기

flex:1 은 실제로 아래와 같이 해석된다.

  
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

flex-grow: 1 → 남는 공간이 있을 때, 이 요소가 비율 1만큼 차지해서 늘어난다.
flex-shrink: 1 → 공간이 부족할 때 비율 1만큼 줄어들 수 있다.
flex-basis: 0% → 요소의 기본 크기는 0으로 설정된다. 즉, 오로지 남는 공간을 기준으로 크기를 조절함.

기본적으로 Flex 컨테이너 내부의 요소는 min-height: auto 속성을 가지고 있어, 자식 콘텐츠의 크기를 고려해서 자신을 늘릴 수 있게 설정되어 있다.

그래서 flex-1로 공간을 제한했더라도, 자식 콘텐츠가 크면 컨테이너도 같이 커져버려서 스크롤이 아닌 부모 밖으로 콘텐츠가 넘치는 현상이 발생한다.

결과적으로, overflow-y-auto가 있어도 자식이 커지면 flex-1 영역도 같이 커져버린다.

overflow-y-auto는 내부 콘텐츠가 부모보다 클 때만 스크롤이 생긴다. 하지만 현재 상황에선 부모 요소(flex-1)가 자식 높이를 따라 계속 커지기 때문에, 스크롤이 생기기 전에 공간이 늘어나버리는 문제가 생긴 것이다.

💡 문제 해결

  
<body class="h-screen flex flex-col">
  <header class="h-16 bg-gray-200">헤더</header>
  <main class="flex-1 overflow-y-auto min-h-0 bg-white">
    <div class="h-[2000px]">길게 넘치는 콘텐츠</div>
  </main>
</body>

✅ 체크리스트 🔍

overflow-y-auto 있음? -> 스크롤 유도
flex-1 부모가 height를 가지고 있나? -> (h-screen, h-full, 등)
min-h-0을 줬는가? -> 자식 높이 제한

Study, Error Heading

This post is licensed under CC BY 4.0 by the author.

❗ 문제 상황

💡 문제 원인 찾기

💡 문제 해결

Trending Tags