min-width

요소의 최소 너비를 보장합니다. 요소가 특정 크기 아래로 줄어드는 것을 방지하여, 버튼 최소 크기, 사이드바 고정 폭, 입력 필드 최소 크기 등에 사용합니다. minw + 단위 조합으로 사용합니다.

클래스 목록

클래스	CSS	설명
`minw{N}px`	min-width: {N}px	픽셀 단위 최소 너비 (20px 미만)
`minw{N}rem`	min-width: {N}rem	rem 단위 최소 너비 (20px 이상, 1rem=10px)
`minw{N}p`	min-width: {N}%	퍼센트 단위 최소 너비
`minwa`	min-width: auto	브라우저 기본값 (flex에서는 콘텐츠 크기)
`minwn`	min-width: none	최소 너비 제한 해제
`minwfc`	min-width: fit-content	콘텐츠에 맞는 크기를 최소로 사용
`minwminc`	min-width: min-content	가장 긴 단어 기준 최소 크기
`minwmaxc`	min-width: max-content	줄바꿈 없이 한 줄에 들어가는 크기

시각적 비교

다양한 min-width 값이 요소에 어떤 영향을 주는지 비교합니다.

min-width: 200px — minw200px

텍스트가 짧아도 최소 200px을 유지합니다

min-width: 30rem (300px) — minw30rem

Short

1rem = 10px 기준으로 최소 300px 보장

min-width: 50% — minw50p

minw50p (부모의 50%)

부모 너비의 절반 이하로 줄어들지 않음

min-width: auto — minwa

auto

Flex 자식에서는 콘텐츠 크기가 최소 너비가 됩니다

버튼 최소 너비

버튼 텍스트가 짧아도 일정한 크기를 유지하도록 min-width를 적용합니다. UI 일관성에 필수적입니다.

<!-- 버튼 최소 너비 보장 -->
<div class="df gap8px">
  <button class="minw10rem py8px px16px bg6366F1 cFFFFFF br8px bn cp tac">OK</button>
  <button class="minw10rem py8px px16px bg6366F1 cFFFFFF br8px bn cp tac">Cancel</button>
  <button class="minw10rem py8px px16px bg6366F1 cFFFFFF br8px bn cp tac">Submit</button>
</div>

<!-- 더 넓은 최소 너비 -->
<div class="df gap8px">
  <button class="minw16rem py12px px2rem bg34D399 c000000 br8px bn cp tac fw600">확인</button>
  <button class="minw16rem py12px px2rem bg27272A cFFFFFF br8px bn cp tac fw600">취소</button>
</div>

min-width 적용 전 vs 후

min-width 없음:

OKCancelSubmit Form

minw10rem 적용:

OKCancelSubmit Form

min-width 적용 후 짧은 텍스트의 버튼도 최소 100px 너비를 유지합니다

Flex나 Grid 레이아웃에서 사이드바가 너무 좁아지지 않도록 최소 너비를 지정합니다.

<!-- 사이드바 최소 너비 보장 -->
<div class="df gap2rem">
  <aside class="minw20rem fs0 bg18181B p2rem br8px">
    <!-- 최소 200px, 절대 그 이하로 줄어들지 않음 -->
    <nav>사이드바 메뉴</nav>
  </aside>
  <main class="fg1 minw0">
    <!-- minw0: flex 자식 overflow 방지 -->
    <p>메인 콘텐츠</p>
  </main>
</div>

<!-- Grid 레이아웃에서도 동일 -->
<div class="dg gtc25rem-1fr gap2rem">
  <aside class="minw20rem bg18181B p2rem br8px">사이드바</aside>
  <main>메인 콘텐츠</main>
</div>

사이드바 + 메인 레이아웃

사이드바 (minw12rem)

메인 콘텐츠 영역 (fg1)

사이드바는 최소 120px 이하로 줄어들지 않습니다

콘텐츠 기반 크기

고정 값 대신 콘텐츠에 맞춰 최소 너비를 결정하는 키워드 클래스입니다.

fit-content — minwfc

fit-content

콘텐츠 크기를 최소 너비로 사용

min-content — minwminc

min-content

가장 긴 단어의 너비를 최소로 사용

max-content — minwmaxc

max-content

줄바꿈 없이 전체 텍스트가 들어가는 너비를 최소로 사용

<!-- fit-content -->
<div class="minwfc bg18181B p16px br8px">
  콘텐츠 크기를 최소 너비로 사용
</div>

<!-- min-content -->
<div class="minwminc bg18181B p16px br8px">
  가장 긴 단어의 너비를 최소로 사용
</div>

<!-- max-content -->
<div class="minwmaxc bg18181B p16px br8px">
  줄바꿈 없는 전체 텍스트 너비를 최소로 사용
</div>

반응형 min-width

미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 다른 min-width를 적용할 수 있습니다.

<!-- 모바일에서 최소 너비 해제 -->
<div class="minw30rem sm-minwa">
  기본 300px 최소 → 모바일에서 auto
</div>

<!-- 버튼 반응형 최소 너비 -->
<button class="minw16rem sm-minw10rem py8px px16px bg6366F1 cFFFFFF br8px bn cp">
  기본 160px → 모바일 100px
</button>

클래스 조합	동작
`minw30rem sm-minwa`	기본 300px 최소, 768px 이하에서 auto
`minw20rem md-minw16rem`	기본 200px 최소, 1024px 이하에서 160px
`minw16rem sm-minw10rem`	기본 160px 최소, 768px 이하에서 100px
`minw0`	Flex 자식의 overflow 문제 해결 (모든 화면)

팁 & 주의사항

버튼에 min-width 활용

텍스트가 짧은 버튼(OK, No 등)도 일정한 크기를 유지하려면 minw10rem 또는 minw12rem을 적용하세요.

Flex 자식의 축소 방지

Flex 컨테이너 안에서 자식이 너무 줄어드는 것을 방지하려면 minw0 또는 특정 최소 값을 설정하세요. Flex의 기본 min-width는 auto라서 overflow 문제가 생길 수 있습니다.

minw0 — Flex overflow 해결

Flex 자식에서 텍스트가 넘치는 경우, minw0을 적용하면 해결됩니다. Flex 자식의 기본 min-width: auto가 축소를 방해하기 때문입니다.

테이블 셀 최소 너비

테이블 컬럼이 너무 좁아지지 않도록 minw12rem 등을 적용하면 데이터가 읽기 어려워지는 것을 방지합니다.

width max-width height flex-shrink overflow