min-width 속성의 이해

min-width 속성은 요소의 최소 너비, 즉 최소한의 가로 크기를 지정합니다.

요소의 콘텐츠나 스타일에 의해 너비가 작아지더라도, 최소 너비인 min-width 값 미만으로는 줄어들지 않도록 제한할 수 있습니다.

이 크기의 기준은 기본적으로 콘텐츠 영역의 너비입니다.
그러나, 요소의 크기를 계산할 때 크기의 기준을 설정하는 box-sizing이 border-box로 설정되어 있다면 테두리 영역까지의 너비가 기준이 됩니다.

형식 구문

CSS 
selector {
    min-width: <길이> | <퍼센트(%)> | <키워드>
}

예제

다음의 예제들은 min-width 속성이 요소의 최소 너비를 설정하는 방식을 잘 보여줍니다.

요소의 너비가 지정되지 않은 경우

이 예제에서는 두 개의 <button> 요소가 사용됩니다.
첫 번째는 min-width가 지정되지 않은 Button-A이고,
두 번째는 비교를 위해 min-width가 200px로 지정된 Button-B입니다.

HTML 
<button class="btn-a">Button-A</button>
<hr>
<button class="btn-b">Button-B</button>
CSS 
.btn-a {
    /* min-width가 지정되지 않음 */
    /* 콘텐츠에 맞춰 너비가 결정 */
}
.btn-b {
    min-width: 200px; /* 200px이 적용됨 */
}
실제 적용된 모습
설명
  • 첫 번째 Button-A는 min-width가 지정되지 않았기 때문에 콘텐츠에 맞춰 너비가 결정됩니다.
  • 반면, 두 번째 Button-B는 min-width가 200px로 지정되어 있기 때문에, 콘텐츠의 너비가 그보다 작더라도 최소 너비인 200px를 유지하게 됩니다.

이처럼 min-width는 요소의 최소 너비를 설정하여 콘텐츠나 스타일에 의해 너비가 최소 너비보다 줄어드는 것을 방지합니다.

요소의 너비가 지정되었을 경우

이 예제에서는 세 개의 <button> 요소가 사용됩니다.
첫 번째는 width: 100px로 지정된 Button-A이고,
두 번째는 width: 250px로 지정된 Button-B입니다.
두 요소 모두 min-width가 200px로 지정되어 있습니다.
세 번째는 비교를 위해 width: 100px이 지정되었지만, min-width가 지정되지 않은 Button-C입니다.

부연설명
width 속성은 요소의 너비, 즉 가로 크기를 지정합니다.

HTML 
<button class="btn-a">Button-A</button>
<hr>
<button class="btn-b">Button-B</button>
<hr>
<button class="btn-c">Button-C</button>
CSS 
.btn-a {
    width: 100px;
    min-width: 200px; /* 200px이 적용됨 */
}
.btn-b {
    width: 250px; /* 250px이 적용됨 */
    min-width: 200px;
}
.btn-c {
    width: 100px; /* 100px이 적용됨 */
}
실제 적용된 모습
설명
  • 첫 번째 Button-A는 width: 100px이 지정되었지만, min-width: 200px보다 작기 때문에 min-width로 지정한 최소 너비인 200px을 가집니다.
  • 두 번째 Button-B는 width: 250px이 지정되어 있으며, 최소 너비인 min-width: 200px보다 크므로 width 값인 250px이 그대로 적용됩니다.
  • 세 번째 Button-C는 min-width가 지정되지 않았기 때문에 width로 지정한 100px이 적용됩니다.

이 예제는 min-width와 width 속성이 어떻게 작용하는지를 잘 보여줍니다.

width와 max-width와의 관계

  • min-width가 width보다 크면 width는 min-width의 값을 사용합니다.
  • min-width가 max-width보다 크면 max-width는 min-width의 값을 사용합니다.

min-width가 max-width보다 큰 경우

HTML 
<button>button</button>
CSS 
button {
    min-width: 250px; /* max-width보다 큼 */
    max-width: 30px;
}
실제 적용된 모습

구문

CSS 
/* <길이> 단위 값 */
min-width: 120px;
min-width: 13rem;
min-width: 15rem;

/* <퍼센트(%)> 단위 값 */
min-width: 50%; /*  부모 요소 너비의 50% */
min-width: 100%; /*  부모 요소 너비의 100% */

/* <키워드> 값 */
min-width: auto; /* 초깃값 */
min-width: max-content;
min-width: min-content;
min-width: fit-content;

/* 전역 값 */
min-width: inherit;
min-width: initial;
min-width: revert;
min-width: revert-layer;
min-width: unset;

값

min-width 속성은 다양한 형태의 값을 사용할 수 있습니다.
이를 설명과 예제로 정리하면 다음과 같습니다.

<길이> 단위 값

길이 단위의 값은 항상 양수입니다. (음수 값은 유효하지 않습니다.)

상대적 <길이> 단위
  • rem - 루트 요소인 <html> 요소의 font-size를 의미합니다. rem은 root em(element)을 나타냅니다.
  • em - 현재 요소의 font-size를 1em의 기준으로 합니다.

CSS rem과 em 단위 – 올바른 이해와 사용 방법을 참조하세요.

절대적 <길이> 단위
  • px
  • vh
  • vw
  • CSS에서 사용 가능한 길이 단위
예제
HTML 
<button>Button</button>
<hr>
<button>Button Button Button Button</button>
CSS 
button {
    min-width: 150px;
}
실제 적용된 모습

<퍼센트(%)> 단위 값

부모 요소의 너비에 대한 백분율로 정의합니다.

예제
HTML 
<div class="parent">
    <button class="child">button</button>
</div>
CSS 
.parent {
    background-color: gold;
}
.child {
    min-width: 50%;
}
실제 적용된 모습

auto 값

초깃값입니다.
요소의 display 값에 따라 해석되는 방식이 달라집니다.

블록 요소(display: block), 인라인 요소(display: inline), 인라인 블록 요소(display: inline-blcok), 모든 테이블 레이아웃 요소

이들 요소에서 min-width: auto는 0으로 해석됩니다.
즉, 최소 너비가 설정되지 않아 요소가 아주 작아질 수 있습니다.

플렉스 박스나 그리드 박스의 아이템

플렉스 박스는 display 값이 flex나 inline-flex인 요소 컨테이너를 의미하며, 이 컨테이너는 그 안에 포함된 자식 요소(아이템)를 유연하게 배치할 수 있습니다. 마찬가지로, 그리드 박스는 display 값이 grid나 inline-grid인 요소 컨테이너를 의미하며, 이 컨테이너는 그 안의 아이템들을 2차원 그리드 형태로 배치합니다.

이러한 플렉스 박스나 그리드 박스의 아이템인 경우에는 다음과 같이 작동합니다.

지정된 크기

width 속성이나 다른 속성에서 너비가 지정되어 있다면, min-width: auto는 그 지정된 크기를 사용합니다.

전달된 크기

플렉스 박스나 그리드 박스에서의 자식 요소들, 즉 아이템들은 부모 요소로부터 크기 정보를 상속받거나 전달받을 수 있습니다. 부모 요소에서 크기가 전달된 경우, 그 크기를 min-width: auto로 사용합니다.

종횡비

aspect-ratio가 설정되고, height가 명시적으로 지정되어 있으면, 그 종횡비를 기반으로 min-width: auto가 계산됩니다.

min-content

위의 조건에 해당하지 않는 경우,
콘텐트를 모두 표시하기 위한 최적의 최소 크기인 min-content가 사용됩니다.

플렉스 박스나 그리드 박스의 아이템이 스크롤 컨테이너이거나 두 개 이상의 열(flexible column track)에 걸쳐 있는 그리드 아이템인 경우

이 경우 이들 요소에서 min-width: auto는 0으로 해석됩니다.
즉, 최소 너비가 설정되지 않아 요소가 아주 작아질 수 있습니다.

max-content 값

min-width 속성에서 max-content 값은 콘텐츠의 최대 너비에 맞춰 요소의 최소 너비를 설정합니다.
즉, 요소의 최소 너비는 콘텐츠가 온전히 차지할 수 있는 시점의 최대 너비로 설정됩니다.

max-content는 그 콘텐츠가 차지하는 최적의 충분한 너비만큼 요소의 크기를 맞추는 역할을 합니다.
예제를 통해 살펴보겠습니다.

HTML 
<div class="parent">
    <p class="child">min-width의 max-content</p>
    <p class="child">min-width의 max-content 값의 이해</p>
    <p class="child">min-width의 max-content 값은 그 콘텐츠가 차지하는 최적의 충분한 너비만큼 요소의 크기를 맞추는 역할</p>
</div>
CSS 
.parent {
    width: 400px;
    background-color: silver;
    border: 5px dashed red;
}
.child {
    width: 0;
    min-width: max-content;
    background-color: gold;
}
실제 적용된 모습
주의할 점

위 예제에서 적용된 모습을 보면 알 수 있듯이, max-content는 해당 요소의 콘텐츠 길이만을 고려하여 요소의 최소 너비를 설정합니다. 부모 요소의 너비나 레이아웃 제약 조건은 고려하지 않습니다.

만약 해당 요소의 max-content 값으로 구현되는 콘텐츠의 너비가 부모 요소의 너비보다 클 경우에는 오버플로(overflow, 경계를 넘어섬)가 발생하여 콘텐츠가 부모 요소의 경계를 넘어설 수 있습니다.

min-content 값

min-width 속성에서 min-content 값은 요소의 콘텐츠가 차지할 수 있는 최적의 최소 너비에 맞춰 요소의 최소 너비를 설정합니다.

min-content는 요소의 인라인 콘텐츠가 줄바꿈 없이 차지할 수 있는 시점의 가장 작은 너비를 의미합니다.
즉, 텍스트는 가능한 모든 단어를 끊지 않고 한 줄로 최소화된 길이로 설정되며, 이미지나 기타 콘텐츠는 더 작게 줄어들 수 없는 크기로 설정됩니다.

예제를 통해 살펴보겠습니다.

HTML 
<div class="parent">
    <p class="child">min-width의 min-content</p>
    <p class="child">min-width의 min-content 값의 이해</p>
    <p class="child">codingeverybody{} 모든 사람을 위한 코딩 학습서입니다.</p>
</div>
CSS 
.parent {
    width: 400px;
    background-color: silver;
    border: 5px dashed red;
}
.child {
    width: 0;
    min-width: min-content;
    background-color: gold;
}
실제 적용된 모습

fit-content 값

min-width 속성에서 fit-content 값은 부모 요소의 너비나 레이아웃 제약을 고려하여
요소의 최소 너비를 min-content와 max-content 사이의 적합한 값으로 설정합니다.

  • min-content보다 작아질 수 없고,
  • max-content보다 커질 수 없으며,
  • 콘텐츠가 부모 요소의 경계를 넘지 않도록 부모 요소의 너비를 초과하지 않습니다.

예제를 통해 살펴보겠습니다.

HTML 
<div class="parent">
    <p class="child">min-width의 fit-content</p>
    <p class="child">min-width의 fit-content 값의 이해</p>
    <p class="child">부모 요소의 너비나 레이아웃 제약을 고려하여 min-content와 max-content 사이의 적합한 값으로 설정합니다.</p>
</div>
CSS 
.parent {
    width: 400px;
    background-color: silver;
    border: 5px dashed red;
}
.child {
    width: 0;
    min-width: fit-content;
    background-color: gold;
}
실제 적용된 모습

주의할 점

display가 inline(대체되지 않은 인라인 요소, non-replaced inline elements)일 경우와 table rows, row groups인 요소에서는 width 속성과 마찬가지로 min-width 속성이 적용되지 않습니다.

HTML 
<span>display가 inline</span>
CSS min-width: 200px;은 적용되지 않습니다. 
span {
    display: inline; /* 이 값을 지정하지 않아도 span 요소의 display 초깃값은 inline이다 */
    min-width: 250px;
    background-color: gold;
}

min-width: 200px;은 적용되지 않습니다. 자신 요소의 보여지는 콘텐츠의 너비가 적용됩니다.

실제 적용된 모습

형식 정의

min-width 속성의 형식 정의
초깃값 auto
적용 요소 display가 inline(대체되지 않은 인라인 요소, non-replaced inline elements)일 경우와 table rows, row groups인 요소를 제외한 모든 요소
상속 아니오
애니메이션 <길이> 단위 값, <퍼센트(%)> 단위 값, calc()로 계산된 값

알아두세요!
<fieldset> 요소는 브라우저의 기본 스타일시트에서는 min-width의 값을 min-content로 설정합니다.

브라우저 호환성

min-width 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
min-width 1 12 1 1
auto 21 12 34 7
max-content 46 79 66 11
min-content 46 79 66 11
fit-content 46 79 94 11

명세서

min-width 속성의 명세서 사양
명세서 사양
min-width CSS Box Sizing Module Level 3
#min-size-properties

참고문헌

같이 보기