Flexbox와 세로 스크롤: 최신 Flexbox API로 전체 높이 앱 레이아웃 만들기

Flexbox와 세로 스크롤: 전체 높이 앱 레이아웃의 핵심

CSS의 flex 속성은 flex-grow, flex-shrink, flex-basis 세 가지 속성을 한 번에 지정할 수 있는 축약형(shorthand)입니다. 이 속성을 활용하면 플렉스 컨테이너 안의 항목(플렉스 아이템)에 유연한 크기를 부여할 수 있어, 화면 높이에 맞춰 콘텐츠 영역이 자동으로 조절되는 전체 높이(full-height) 앱 레이아웃을 손쉽게 구현할 수 있습니다.

flex 속성의 기본 구조

flex 속성은 다음 세 가지 값을 순서대로 지정합니다.

• flex-grow: 남은 공간을 얼마나 차지할지 정하는 비율
• flex-shrink: 공간이 부족할 때 얼마나 줄어들지 정하는 비율
• flex-basis: 항목의 기본 크기

세로 스크롤이 가능한 전체 높이 레이아웃 예제

아래 예제는 #container 안의 article 요소가 남은 공간을 모두 차지하면서, 내용이 넘칠 때만 세로 스크롤이 나타나도록 설정한 코드입니다.

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 0px; /* 여기서 높이를 0px로 설정 */
}

여기서 핵심은 height: 0px;입니다. 높이를 0으로 지정하면 플렉스 항목의 실제 크기가 오직 flex-grow 값에 의해서만 결정됩니다. 그 결과 항목이 컨테이너의 가용 높이에 정확히 맞춰지고, 내용이 그 높이를 초과할 때만 overflow-y: auto에 의해 스크롤바가 생성됩니다.

최소 높이(min-height)가 필요한 경우

항목이 일정한 최소 높이 이상을 유지하기를 원한다면 height에 원하는 값을 직접 지정하면 됩니다. 예를 들어 height: 100px;로 설정하면 사실상 min-height: 100px;을 지정한 것과 동일하게 동작합니다.

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* 여기서 높이를 100px로 설정 */
}

정리

flex: 1 1 auto와 overflow-y: auto, 그리고 적절한 height 값을 조합하면 화면 전체 높이를 활용하면서도 콘텐츠가 많아질 때 자연스럽게 세로 스크롤되는 반응형 레이아웃을 완성할 수 있습니다. 고정된 헤더와 푸터 사이에 스크롤 가능한 본문 영역이 필요한 웹 앱, 대시보드, 관리자 화면 등에서 특히 유용하게 활용되는 패턴이니 꼭 익혀두시길 바랍니다.