Reference/Values/max-content

김동현·2026년 3월 29일

CSS docs

mdn 학습 번역 - CSS

목록 보기

189/190

max-content

Baseline | Widely available

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

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

max-content 크기 조정 키워드는 요소의 최대 고유 크기를 나타내요. 이 키워드는 소프트 래핑 없이 콘텐츠를 표시하는 데 필요한 가장 큰 크기로 요소를 확장해요. 텍스트 콘텐츠의 경우, 이 키워드는 오버플로우를 일으키더라도 콘텐츠를 전혀 래핑하지 않아요.

interpolate-size 프로퍼티와 calc-size() 함수를 사용하면 max-content로 또는 max-content에서 애니메이션을 활성화할 수 있어요.

이 친구는 한마디로 "내가 가진 내용물이 가질 수 있는 최대 너비에 딱 맞춰라!"라고 주문하는 거예요. 텍스트라면 줄 바꿈을 전혀 하지 않고 한 줄로 길게 늘어뜨렸을 때의 너비가 되겠죠? 하나씩 자세히 살펴봅시다!

구문 (Syntax)

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

/* 그리드 트랙에서 사용되는 경우 */
grid-template-columns: 200px 1fr max-content;

예제 (Examples)

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

max-content를 사용하면 박스가 어떻게 반응하는지 직접 확인해 볼까요?

HTML

<div id="container">
  <div class="item">Item</div>
  <div class="item">
    내용이 더 많은 아이템입니다. 이 아이템은 고정된 너비의 박스를 넘치게(overflow) 될 거예요.
  </div>
</div>

CSS

/* 부모 컨테이너는 200px로 고정되어 있어요 */
#container {
  background-color: #8cffa0;
  padding: 10px;
  width: 200px;
}

/* 아이템의 너비를 max-content로 설정합니다 */
.item {
  width: max-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}

결과 (Result)

MDN Playground에서 예제 실행하기

부모 박스의 너비가 200px밖에 안 되는데도, max-content가 적용된 파란색 박스는 텍스트를 한 줄로 다 보여주기 위해 부모를 뚫고 오른쪽으로 길게 삐져나온 걸 볼 수 있을 거예요. 이게 바로 max-content의 특징이랍니다.

max-content로 그리드 열 크기 조절하기 (Sizing grid columns with max-content)

그리드 레이아웃에서 max-content는 특정 열이 내용물 중 가장 긴 것에 딱 맞춰지도록 할 때 정말 유용해요.

HTML

<div id="container">
  <div>Item</div>
  <div>내용이 좀 더 많은 아이템입니다.</div>
  <div>유연한 아이템 (Flexible item)</div>
</div>

CSS

#container {
  display: grid;
  /* 첫 번째와 두 번째 열은 내용물 최대 너비에 맞추고, 세 번째 열은 남은 공간을 다 채워요 */
  grid-template-columns: max-content max-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}