Reference/Values/fit-content

김동현·2026년 3월 29일

CSS docs

mdn 학습 번역 - CSS

목록 보기

188/190

fit-content

Baseline | Widely available

Chrome, Edge, Firefox, Safari에서 지원돼요.

이 기능은 잘 확립되어 있고 많은 기기와 브라우저 버전에서 작동해요. 2021년 11월부터 모든 브라우저에서 사용 가능했어요.

fit-content 크기 조정 키워드는 컨테이너의 제한 내에서 콘텐츠에 맞게 조정되는 요소 크기를 나타내요. 이 키워드는 요소가 최소 고유 크기(min-content)보다 작아지거나 최대 고유 크기(max-content)보다 커지지 않도록 보장해요.

참고:
이 키워드는 fit-content() 함수와 달라요. 함수는 그리드 트랙 크기 조정(예: grid-template-columns와 grid-auto-rows에서)과 width, height, min-width, max-height와 같은 프로퍼티의 레이아웃 박스 크기 조정에 사용돼요.

박스의 크기를 정할 때 "안에 들어있는 내용물만큼만 딱 커져라, 근데 너무 커져서 부모를 뚫고 나가지는 마라!"라고 아주 똑똑하게 명령하는 기능이에요.

구문 (Syntax)

/* 크기 조절 속성에서 사용되는 경우 */
width: fit-content;
height: fit-content;
inline-size: fit-content;
block-size: fit-content;

설명 (Description)

이 키워드는 width, height, block-size, inline-size, min-width, 그리고 max-width 같은 크기 조절 속성들과 함께 사용돼요. 이 속성들에 쓰일 때, 계산된 크기는 요소의 콘텐츠 박스(content box)를 의미하게 된답니다.

fit-content를 설정하면, 요소는 자기 콘텐츠에 맞춰서 크기가 커지거나 줄어들지만, 관련 차원이 컨테이너의 크기 제한에 도달하면 더 이상 확장을 멈춰요.

fit-content 크기는 다음과 같은 공식을 통해서 계산됩니다.

min(max-content, max(min-content, stretch))

여기서 stretch는 요소의 마진 박스(margin box)를 그 컨테이닝 블록(containing block)의 너비와 일치시키는 걸 말해요. 결국 이 키워드는 본질적으로 fit-content(stretch)와 똑같다고 보면 됩니다.

또한, interpolate-size 속성과 calc-size() 함수를 사용하면 fit-content 값을 대상으로 하거나 거기서부터 시작하는 애니메이션 효과도 줄 수 있어요.

예제 (Examples)

fit-content를 사용한 박스 크기 조절 (Sizing boxes with fit-content)

HTML

<div class="container">
  <div class="item">아이템</div>
  <div class="item">텍스트가 조금 더 들어있는 아이템.</div>
  <div class="item">
    텍스트가 훨씬 더 많이 들어있는 아이템이에요. 텍스트가 줄 바꿈을 시작할 수 
    있을 만큼 충분히 긴 내용을 추가해 볼게요.
  </div>
</div>

CSS

.container {
  border: 2px solid #cccccc;
  padding: 10px;
  width: 20em;
}

.item {
  width: fit-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}