fit-content

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2021.

fit-content 키워드는 fit-content(stretch)와 동일합니다. 실제로 이는 박스가 사용 가능한 공간을 사용하되, 절대 max-content보다 크지는 않음을 의미합니다.

width, height, min-width, min-height, max-width 및 max-height 가 레이아웃된 박스의 크기로 사용된 경우, 최대 크기와 최소 크기는 콘텐츠의 크기를 참조합니다.

참고 : CSS Sizing 명세는 fit-content() 함수도 정의합니다. 이 페이지에서는 해당 키워드에 대해 설명합니다.

구문

css
width: fit-content;
block-size: fit-content;

예제

fit-content를 사용해 박스 크기 설정하기

HTML

html
<div class="container">
  <div class="item">항목</div>
  <div class="item">더 많은 텍스트가 포함된 항목입니다.</div>
  <div class="item">
    텍스트가 더 많이 포함된 항목입니다. 텍스트가 줄바꿈되기를 기대하며 충분한
    양의 텍스트를 추가했습니다.
  </div>
</div>

CSS

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

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

결과

명세서

Specification
CSS Box Sizing Module Level 4
# valdef-width-fit-content

브라우저 호환성

BCD tables only load in the browser

같이 보기