참고 :이 텍스트에서 “너비”는 CSS가 아닌 “논리적 너비”를 나타냅니다 width. 즉, height언어 방향이 수직 (동아시아 언어와 같이)이거나 flexbox 또는 그리드에있는 경우 값은 CSS의에도 유효 합니다. min-content및 max-content유효 값이며 width, height, min-width, min-height, max-width, max-height더욱 특성 (등 flex-basis).

상자의 고유 치수는 무엇입니까?

레벨 3 크기 조정 CSS는의 개념을 도입 고유 의 반대 – 치수 외부를 . 상자 의 외부 치수는 상자의 상위 상자에서 계산됩니다. 예를 들어 width: 80%말한다 외부 치수 는 AS width피사체의가에 따라 width그 포함 된 상자.

반대로 한 것과, width: min-content상기되는 극한 박스의 폭 박스 자체에 포함 된 컨텐츠의 사이즈를 계산한다.

고유 치수는 상자 자체의 속성이며, 외부 치수는 상자가 문서 및 이러한 값을 계산할 수있는 컨텍스트에 배치 된 경우에만 사용할 수 있습니다. 예를 들어, CSS-flow (고전적인 CSS 레이아웃 모드)에서 여러분이 알고 있듯이 부모 요소에 정의 된 height: 20%경우에만 효과 height가 있습니다 (즉, 상속 가능함). 이는 계산할 수없는 외 재적 차원 의 경우입니다 (외 재적 값을 사용할 수없는 경우 CSS 는 내재적 차원으로 대체됩니다). 대신 상자 자체에 내재 되어 있으므로 height: min-content항상 계산할 수 있으며 문서에서 상자의 위치 (또는 상자의 부재)에 관계없이 항상 동일합니다.

---

min-contentand 의 정의는 max-content수년에 걸쳐 여러 번 변경되었지만 결과는 항상 동일하게 유지되었으며 이해하기가 매우 간단합니다. 원래 커뮤니티에서에 대한 키워드로 요청한 것으로 width, 상자가 float울릴 때 계산 된 값이 상자의 너비와 일치 합니다. 실제로이 두 속성의 정의는 원래 float; 이제는 다음과 같이보다 일반적으로 정의됩니다.

min-content

https://www.w3.org/TR/css-sizing-3/#min-content

더 큰 크기를 선택하여 피할 수있는 오버 플로우로 이어지지 않는 상자가 취할 수있는 가장 작은 크기입니다.

즉, 상자의 내용물이 상자 자체를 넘치지 않는 상자의 최소 너비입니다 .

이를 시각화하는 좋은 방법은 실제로 float.

/* the computed width of #red in this example
   equals to specifying #red { width: min-content } */
#blue        { width: 0px; }
#blue > #red { float: left; }

(GIF 출처 : http://jsfiddle.net/6srop4zu/ )

위의 GIF 에서 빨간색 상자의 최소 콘텐츠 너비 는 파란색 상자의 너비가 0px 일 때 빨간색 상자의 너비 와 같습니다 (GIF에서는 234px, jsfiddle에서는 다를 수 있음).

보시다시피 빨간색 상자를 더 작게 만들면 단어 supercalifragilisticexpialidocious가 빨간색 상자를 넘치게됩니다. 따라서이 경우에는 min-content가로로 가장 많은 공간을 차지하는 단어이므로 해당 단어의 너비와 같습니다.

max-content

https://www.w3.org/TR/css-sizing-3/#max-content

사용 가능한 공간이 무한 할 때 주어진 축에서 상자의 “이상적인”크기입니다. 일반적으로이 크기는 상자가 해당 축에서 차지할 수있는 가장 작은 크기이며 내용물 주위에 맞습니다. 즉, 오버플로를 피하면서 채워지지 않은 공간을 최소화합니다.

/* the computed width of #red in this example
   equals to specifying #red { width: max-content } */

#blue        { width: 99999999999999999px; } /* ~infinite */
#blue > #red { float: left; }

(GIF 출처 : http://jsfiddle.net/nktsrzvg/ )

위의 GIF 에서 빨간색 상자의 최대 콘텐츠 너비 는 파란색 상자의 너비가 무한 할 때 빨간색 상자의 너비 와 같습니다 (GIF에서는 386px, jsfiddle에서는 다를 수 있음).

여기에서 빨간색 상자는 파란색 상자의 x 축에서 사용 가능한 공간을 완전히 활용하지만 낭비하지는 않습니다. 내용은 제한없이 해당 축에서 확장 할 수 있으며, 빨간색 상자는 최대 확장 지점에서이를 감 쌉니다.

---

무엇에 대한 fit-content, stretch그리고 다른 사람? 이러한 속성은 현재 재검토 중이므로 안정적이지 않습니다 (날짜 : 2018 년 7 월). 그들은 조금 더 성숙 해지면 여기에 추가 될 것입니다.