CSS max-content 키워드 – 콘텐츠가 차지할 수 있는 최대한 이상적인 크기 값

`max-content`

max-content는
콘텐츠가 차지할 수 있는 최대한 이상적인 크기 값을 나타내는 CSS 키워드입니다.

이 값은 콘텐츠가 차지하는 크기로 인해 외부 요인이 적용되지 않은 경우(오버플로를 발생하도라도 여전히), 콘텐츠가 이상적으로 차지할 수 있는 가장 작은 크기입니다.

동일한 콘텐츠가 차지할 수 있는 고유한 크기는 다양

각 요소의 콘텐츠(예: 텍스트, 이미지)가 어떤 레이아웃으로 배치하느냐에 따라 콘텐츠의 너비나 높이 등의 고유한 크기(Intrinsic size)가 각기 달라질 수 있습니다.

예를 들어, 띄어쓰기를 포함하는 텍스트가 있는 요소가 있다고 가정해 보겠습니다.
텍스트가 띄어쓰기를 기준으로 자연스럽게 줄바꿈할 경우와, 반면에 띄어쓰는 유지하지만 줄바꿈을 하지 않는 경우의 텍스트가 차지하는 너비와 높이를 생각해 보세요. 이 두 경우 요소에서 텍스트가 차지하는 고유한 크기, 즉 너비와 높이는 달라집니다.

이처럼 콘텐츠가 차지하는 고유한 크기는 그 배치 방식에 따라 유동적으로 달라지며, 때로는 콘텐츠가 차지할 수 있는 고유한 크기를 기준으로 요소의 크기를 제어할 필요가 있습니다.

콘텐츠가 차지하는 고유 크기는 CSS Box Sizing Module Level 3 - Intrinsic Size Determination 명세서에 정의되어 있습니다.

`max-content`로 요소의 크기 값 제어하기

max-content는 콘텐츠가 차지할 수 있는 고유한 크기를 최대한 이상적인 크기로 지정할 수 있는 키워드 값입니다.
이 값은 콘텐츠가 차지하는 크기로 인해 외부 요인이 적용되지 않은 경우(오버플로를 발생하도라도 여전히), 콘텐츠가 이상적으로 차지할 수 있는 가장 작은 크기입니다.

'콘텐츠가 차지할 수 있는 최대한 이상적인 크기'의 의미

max-content 값으로 제어되는 '콘텐츠가 차지할 수 있는 최대한 이상적인 크기'의 의미는 다음과 같습니다.
이 값의 의미는 너비 크기 값과 높이 크기 값으로 나누어 아래의 표로 설명하겠습니다.

max-content 값의 구현 방식
너비 크기 값	텍스트나 인라인 콘텐츠의 경우, 오버플로가 발생하더라도 전혀 자동 줄바꿈(soft-wrapping)을 수행하지 않고 텍스트나 인라인 콘텐츠를 모두 펼쳐서 표시할 수 있는 이상적으로 충분히 차지할 수 있는 가장 작은 크기를 의미합니다. 블록 콘텐츠는 그 고유 너비를 그대로 의미합니다.
높이 크기 값	해당 요소에 설정되어 있는 너비를 기준으로, 콘텐츠의 높이가 이상적으로 충분히 맞춰질 수 있는(오버플로가 발생하더라도) 가장 작은 크기를 의미합니다. 블록 콘텐츠는 그 고유 높이를 그대로 의미합니다.

max-content 값은 요소의 너비 크기와 관련된 속성(예: width, max-width, grid-template-columns)과 요소의 높이 크기와 관련된 속성(예: min-height, max-height)에서 주로 사용됩니다.

구문

CSS

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

/* 그리드 트랙에서 사용됨 */
grid-template-columns: 150px 1fr max-content;

예제

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

텍스트 콘텐츠

다음은 텍스트로만 구성된 콘텐츠를 가진 요소에 max-content 값을 적용한 예제입니다.

인라인 요소

다음은 인라인 요소로 구성된 콘텐츠를 가진 요소에 max-content 값을 적용한 예제입니다.

`grid-template-columns`

다음은 그리드 트랙에서 컬럼의 사이즈로 max-content 값을 적용한 예제입니다.

HTML

<div class="grid-container">
    <div class="grid-item">Item</div>
    <div class="grid-item">Item with more text in it.</div>
    <div class="grid-item">max-content item</div>
</div>

CSS

.grid-container {
    display: grid;
    grid-template-columns: auto auto max-content;
    gap: 10px;
    background-color: lightgray;
}
.grid-item {
    padding: 10px;
    background-color: gold;
}

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

max-content는 그 콘텐츠가 차지하는 최적의 충분한 높이만큼만 요소의 크기를 맞추는 역할을 합니다.
예제를 통해 살펴보겠습니다.

HTML

<h4>height: max-content</h4>
<div class="parent">
    <div class="child max-content-item">height의 max-content</div>
    <div class="child max-content-item">height의 max-content 값의 이해</div>
    <div class="child max-content-item">
        height의 max-content 값은 그 콘텐츠가
        차지하는 최적의 충분한 높이만큼 요소의 크기를
        맞추는 역할을 합니다.
    </div>
</div>
<h4>height: auto</h4>
<div class="parent">
    <div class="child auto-item">height의 max-content</div>
    <div class="child auto-item">height의 max-content 값의 이해</div>
    <div class="child auto-item">
        height의 max-content 값은 그 콘텐츠가
        차지하는 최적의 충분한 높이만큼 요소의 크기를
        맞추는 역할을 합니다.
    </div>
</div>

CSS

.parent {
    display: flex; /* Flexbox 사용 */
    align-items: stretch;
    background-color: silver;
    border: 5px dashed red;
    gap: 10px;
    padding: 10px;
}
.child {
    width: 120px; /* 모든 요소에 동일한 너비 적용 */
    background-color: gold;
    border: 1px solid navy;
    padding: 5px;
}
.max-content-item {
    height: max-content; /* 콘텐츠가 차지하는 최적의 충분한 높이만큼만 */
}
.auto-item {
    height: auto;
}