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-widthmax-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

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fit-content

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

같이 보기