fit-content

fit-content는
레이아웃 제약(예: 오버플로 발생)을 고려하여 min-content와 max-content 사이의 적합한 크기 값을 나타내는 CSS 키워드입니다.

이 값은 주어진 공간에 적합한 크기 값을 동적으로 설정할 때 매우 유용합니다.

fit-content 값의 의미

  • max-content 값을 사용해도 오버플로가 발생하지 않는 충분한 공간 크기에서는 max-content 값을 적용합니다.
  • min-content 값을 사용해야지만 오버플로가 발생하지 않을 정도이거나 더 작은 공간 크기에서는 min-content 값을 적용합니다.
  • min-content 값을 사용하기에는 충분한 공간 크기이지만, max-content 값을 사용하면 오버플로가 발생하는 공간 크기이면 해당 축(너비나 높이 축)의 컨테이닝 블록(containing block)을 꽉 채우는 크기(stretch-fit)의 auto 값을 적용합니다.

알아두세요!
CSS 명세서(CSS Box Sizing Module Level 4)에는 stretch-fit 크기 값을 정의하고 있습니다.

fit-content 값은 min-content 값보다 작아질 수 없으며, max-content 값보다 커질 수 없습니다.

구문

CSS 
/* 길이 값으로 사용됨 */
width: fit-content;
min-width: fit-content;
max-width: fit-content;
height: fit-content;
min-height: fit-content;
max-height: fit-content;
flex-basis: fit-content;

주의할 점

그리드 트랙에서 min-content나 max-content 값은 사용 가능하지만, fit-content 값은 사용할 수 없습니다.

CSS 
/* 그리드 트랙에서 사용할 수 없음.
   유효하지 않은 속성의 값 */
grid-template-columns: 150px 1fr fit-content;

fit-content는 grid-template-columns에서 단독으로 사용할 수 없으며, fit-content(값) 형식으로 사용해야 합니다.

예제

다음 예제들에서는 fit-content가 요소의 크기에 어떻게 적용되는지 살펴보겠습니다.

max-content 값을 적용할 때

max-content 값을 사용해도 오버플로 발생하지 않는 충분한 공간 크기에서는 max-content 값을 적용됩니다.

HTML 
<div class="parent">
    <p class="child">부모 요소보다 너비가 충분히 작음</p>
</div>
CSS 
.parent {
    width: 300px;
    background-color: silver;
    border: 5px dashed red;
}
.child {
    width: fit-content;
    background-color: gold;
}
실제 적용된 모습
부연설명

max-content 값이 너비에 적용된다는 의미는 다음과 같습니다.

텍스트나 인라인 콘텐츠의 경우, 오버플로가 발생하더라도 전혀 자동 줄바꿈(soft-wrapping)을 수행하지 않고 텍스트나 인라인 콘텐츠를 모두 펼쳐서 표시할 수 있는 이상적으로 충분히 차지할 수 있는 가장 작은 크기를 의미합니다. 블록 콘텐츠는 그 고유 너비를 그대로 의미합니다.

min-content 값을 적용할 때

min-content 값을 사용해야지만 오버플로가 발생하지 않을 정도이거나 더 작은 공간 크기에서는 min-content 값을 적용합니다.

HTML 
<div class="parent">
    <p class="child">There's a very loooooooooong text</p>
</div>
CSS 
.parent {
    width: 50px;
    background-color: silver;
    border: 5px dashed red;
}
.child {
    width: fit-content;
    background-color: gold;
}
실제 적용된 모습
부연설명

min-content 값이 너비에 적용된다는 의미는 다음과 같습니다.

텍스트나 인라인 콘텐츠의 경우 자동 줄바꿈(soft-wrapping)할 수 있으면 모두 줄바꿈하여 가장 큰 단어나 인라인 콘텐츠만큼 작아짐을 의미합니다. 블록 컨텐츠는 그 고유 너비를 그대로 의미합니다. 명목상 오버플로를 방지하려는 목적의 최소 크기이지만, 실제 적용된 모습 처럼 자동 줄바꿈할 수 있는 모든 콘텐츠가 자동 줄바꿈했을 때에도 콘텐츠가 차지하는 고유 크기가 공간 크기보다 더 크다면 오버플로됩니다.

auto 값을 적용할 때

min-content 값을 사용하기에는 충분한 공간 크기이지만, max-content 값을 사용하면 오버플로가 발생하는 공간 크기이면 해당 축(너비나 높이 축)의 컨테이닝 블록(containing block)을 꽉 채우는 크기(stretch-fit)의 auto 값을 적용합니다.

HTML 
<div class="parent">
    <p class="child">
        min-content 값을 사용하기에는 충분한 공간 크기이지만,
        max-content 값을 사용하면 오버플로가 발생하는 공간 크기이면
        해당 축(너비나 높이 축)의 컨테이닝 블록(containing block)을 꽉 채우는 크기(stretch-fit)의
        auto 값을 적용합니다.
    </p>
</div>
CSS 
.parent {
    width: 300px;
    background-color: silver;
    border: 5px dashed red;
}
.child {
    width: fit-content;
    background-color: gold;
}
실제 적용된 모습

요소의 높이 크기에 적용하기

다음의 예제에서는 fit-content가 요소의 높이 크기에 어떻게 적용되는지 살펴보겠습니다.

HTML 
<h4>height: fit-content</h4>
<div class="parent">
    <div class="child fit-content-item">height의 fit-content</div>
    <div class="child fit-content-item">height의 fit-content 값의 이해</div>
    <div class="child fit-content-item">
        max-content 값을 사용해도 오버플로가 발생하지 않는 충분한 공간 크기에서는 max-content 값을 적용합니다.
        min-content 값을 사용해야지만 오버플로가 발생하지 않을 정도이거나 더 작은 공간 크기에서는 min-content 값을 적용합니다.
        그 사이의 공간 크기에서는 auto 값을 적용합니다.
    </div>
</div>
<h4>height: auto</h4>
<div class="parent">
    <div class="child auto-item">height의 fit-content</div>
    <div class="child auto-item">height의 fit-content 값의 이해</div>
    <div class="child auto-item">
        max-content 값을 사용해도 오버플로가 발생하지 않는 충분한 공간 크기에서는 max-content 값을 적용합니다.
        min-content 값을 사용해야지만 오버플로가 발생하지 않을 정도이거나 더 작은 공간 크기에서는 min-content 값을 적용합니다.
        그 사이의 공간 크기에서는 auto 값을 적용합니다.
    </div>
</div>
CSS 
.parent {
    display: flex;
    align-items: stretch;
    background-color: silver;
    border: 5px dashed red;
    gap: 10px;
    padding: 10px;
    width: 300px;
    height: 330px;
}
.child {
    background-color: gold;
    border: 1px solid navy;
    padding: 5px;
}
.fit-content-item {
    height: fit-content;
}
.auto-item {
    height: auto;
}
실제 적용된 모습
부연설명

이 예제는 요소의 높이 크기(height)에 fit-content 값이 적용되었을 때 어떻게 구현되는지를 잘 나타냅니다.

너비와 높이가 동일한 두 개의 플렉스 박스의 아이템 중 첫 번째 플렉스 박스의 아이템에는 height: fit-content를 설정하고, 두 번째 플렉스 박스의 아이템은 height: auto를 설정했습니다. 모든 아이템의 너비는 300px로 고정해서 높이에 적용되는 height: fit-content과 height: auto 값의 차이를 비교했습니다.

두 개의 플렉스 박스는 동일하게 height: 330px로 지정해서, 아이템의 높이에 구현에 대한 레이아웃 제약(오버플로)을 두었고, 이 두 플렉스 박스의 align-item: stretch를 설정하여 아이템이 height: auto일 경우에는 아이템들의 높이가 플렉스 박스에 꽉 채워지도록 설정하였습니다. 아이템이 height: auto가 아닐 경우에는 해당하는 높이 값으로 설정됩니다.

이때, 너비와 높이가 동일한 두 개의 플렉스 박스를 비교합니다.

  • 첫 번째 플렉스 박스 아이템에 height: fit-content의 적용
  • 두 번째 플렉스 박스 아이템에 height: auto의 적용

첫 번째 플렉스 박스 아이템에 height: fit-content의 적용에서는 부모 요소인 플렉스 박스에 지정한 높이보다 큰 아이템이 있을 경우 오버플로되는 것을 알 수 있습니다. 이것은 해당 아이템의 높이에 min-content 값이 적용되었기 때문입니다. 나머지 아이템들은 사용 가능한 높이 크기 공간이 충분하므로 max-content 값이 적용되었습니다.

두 번째 플렉스 박스 아이템에 height: auto의 적용에서는 부모 요소인 플렉스 박스에 지정한 높이보다 큰 아이템이 있을 경우 아이템 자체는 오버플로되지 않습니다. align-item: stretch가 적용되기 때문입니다. 하지만, 해당 아이템의 콘텐츠가 요소의 높이보다 크기 때문에 오버플로되는 것입니다. 나머지 아이템들은 사용 가능한 높이 크기 공간이 충분하므로 플렉스 박스에 꽉 채워지고, 해당하는 요소의 콘텐츠 높이가 요소의 높이보다 작기 때문에 그만큼의 여유 공간이 생깁니다.

주의할 점

fit-content 값은 max-content, min-content, auto 값과 마찬가지로 CSS 속성 값을 지정할 때 값으로 사용할 수식의 계산을 수행하는 calc()로 계산을 수행할 수 없습니다.

CSS 
selector {
    width: calc(fit-content + 50px); /* 유효하지 않은 속성 값입니다. */
}

브라우저 호환성

fit-content 키워드의 브라우저 호환성
키워드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
fit-conten 46 79 94 11

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

fit-content 키워드의 명세서 사양
명세서 사양
fit-content CSS Box Sizing Module Level 3
#fit-content-size
stretch-fit CSS Box Sizing Module Level 3
#stretch-fit-size

같이 보기