AAtomic CSS

max-height

요소의 최대 높이를 제한합니다. maxh40rem으로 스크롤 컨테이너를 만들거나, maxh100vh로 뷰포트 높이에 맞출 수 있습니다.

클래스 목록

패턴: maxh{N}px, maxh{N}rem, maxh{N}vh 또는 키워드 클래스를 사용합니다.

클래스CSS설명
maxh200pxmax-height: 200px최대 높이 200px
maxh40remmax-height: 40rem최대 높이 40rem (400px)
maxh100vhmax-height: 100vh뷰포트 높이에 맞춤
maxhamax-height: auto자동 결정
maxhnmax-height: none제한 없음 (기본값)
maxhfcmax-height: fit-content콘텐츠에 맞게 조정
maxhmincmax-height: min-content최소 콘텐츠 크기
maxhmaxcmax-height: max-content최대 콘텐츠 크기

시각적 비교

동일한 콘텐츠에 다른 max-height를 적용한 결과를 비교합니다.

100px — maxh100px

Line 1: 첫 번째 줄

Line 2: 두 번째 줄

Line 3: 세 번째 줄

Line 4: 네 번째 줄

Line 5: 다섯 번째 줄

Line 6: 여섯 번째 줄

Line 7: 일곱 번째 줄

200px — maxh200px

Line 1: 첫 번째 줄

Line 2: 두 번째 줄

Line 3: 세 번째 줄

Line 4: 네 번째 줄

Line 5: 다섯 번째 줄

Line 6: 여섯 번째 줄

Line 7: 일곱 번째 줄

none (제한 없음) — maxhn

Line 1: 첫 번째 줄

Line 2: 두 번째 줄

Line 3: 세 번째 줄

Line 4: 네 번째 줄

Line 5: 다섯 번째 줄

Line 6: 여섯 번째 줄

Line 7: 일곱 번째 줄

클래스별 상세

maxh{N}pxmaxh{N}remmaxh{N}vh

고정 단위로 최대 높이를 지정합니다. 콘텐츠가 이 값을 초과하면 overflow 설정에 따라 잘리거나 스크롤됩니다.

<!-- 스크롤 가능한 리스트 -->
<ul class="maxh40rem oya lsn df fdc gap8px">
  <li class="p12px bg18181B br4px cFAFAFA">항목 1</li>
  <li class="p12px bg18181B br4px cFAFAFA">항목 2</li>
  <!-- ... 많은 항목 -->
</ul>

<!-- 모달 콘텐츠 영역 -->
<div class="maxh80vh oya p2rem">
  <p class="cFAFAFA lh1-7">긴 모달 콘텐츠...</p>
</div>

<!-- 이미지 최대 높이 제한 -->
<img src="photo.jpg" class="maxh40rem w100p ofc" />

자주 쓰는 값

maxh200px oya200px 제한 + 세로 스크롤
maxh40rem oya스크롤 가능한 콘텐츠 영역 (400px)
maxh100vh뷰포트 높이에 맞춤
maxh80vh oya뷰포트 80% 제한 + 스크롤 (모달)

maxhnmax-height: none

최대 높이 제한을 제거합니다. 기본값이며, 반응형에서 특정 breakpoint에서만 제한을 해제할 때 사용합니다.

<!-- 반응형: 데스크탑 제한 → 모바일 해제 -->
<div class="maxh40rem sm-maxhn oya">
  <p class="cFAFAFA lh1-7">콘텐츠...</p>
</div>

maxhamax-height: auto

브라우저가 자동으로 max-height를 결정합니다.

<!-- auto max-height -->
<div class="maxha">
  <p class="cFAFAFA lh1-7">자동으로 높이가 결정됩니다.</p>
</div>

maxhfcmaxhmincmaxhmaxc

콘텐츠 기반 키워드입니다. maxhfc는 콘텐츠에 맞게 조정, maxhminc는 최소 콘텐츠 크기, maxhmaxc는 최대 콘텐츠 크기를 기준으로 합니다.

<!-- fit-content -->
<div class="maxhfc bg18181B p2rem br8px">
  <p class="cFAFAFA">콘텐츠에 딱 맞는 높이</p>
</div>

<!-- min-content -->
<div class="maxhminc oh bg18181B p2rem br8px">
  <p class="cFAFAFA">최소 콘텐츠 크기까지만</p>
</div>

팁 & 주의사항

스크롤 컨테이너 패턴

maxh40rem oya 조합으로 높이가 넘치면 세로 스크롤이 생기는 컨테이너를 만들 수 있습니다.

반응형 max-height

maxh40rem sm-maxhn으로 데스크탑에서는 높이를 제한하고, 모바일에서는 제한을 해제할 수 있습니다.

overflow 설정 필수

max-height만 설정하면 넘치는 콘텐츠가 보일 수 있습니다. 반드시 oh(hidden) 또는 oya(auto)를 함께 사용하세요.

heightmin-heightmax-widthoverflow