Як справи min-contentmax-content обчислюються значення та значення в CSS?

А що означає внутрішній вимір?

Примітка: "ширина" в цьому тексті стосується "логічної ширини", а не CSS width; тобто значення також є дійсними для CSS height, якщо напрямок мови вертикальний (як східно-азіатські мови) або у флексбоксі чи сітці. min-contentі max-contentє допустимими значеннями для width, height, min-width, min-height, max-width, max-heightі навіть більше властивостей (наприклад flex-basis).

Які внутрішні розміри коробки?

Розмір CSS розміру 3 ввів поняття внутрішніх розмірів - протилежність зовнішньому . Зовнішній розмір коробки розраховується на батьківському вікні боксу. Наприклад width: 80%, називається зовнішній вимір, оскільки widthсуб'єкт залежить від поля, що widthйого містить.

Навпаки, width: min-contentце називається внутрішньою умовою, оскільки ширина вікна обчислюється за розміром вмісту, який містить сама коробка.

Внутрішні розміри - це властивості самого вікна, зовнішні розміри доступні лише в тому випадку, якщо вікно розміщено в документі та в контексті, що дозволяє обчислювати ці значення. Наприклад, у CSS-потоці (класичний режим розмітки CSS), як ви, мабуть, знаєте, height: 20%діє лише у випадку, якщо heightвизначений у батьківському елементі (тобто він успадковується); це випадок зовнішнього виміру, який не піддається обчисленню (коли зовнішнє значення недоступне, CSS повертається до власного еквівалента). Натомість height: min-contentзавжди можна обчислити, оскільки це властиво самому коробці, і воно завжди однакове незалежно від розміщення коробки (або відсутності коробки) у документі.

Визначення min-contentта 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 (234px в форматі GIF, можуть бути різними в 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, червоній коробці в макс-контенту ширина дорівнює ширині червоній коробці, коли ширина синій коробці є нескінченним (386px в форматі GIF, можуть бути різними в jsfiddle).

Тут червоне поле повністю використовує наявний простір на осі x у синьому полі, але не витрачаючи його. Вмісту дозволяється розширюватись на відповідній осі без обмежень, а червоне поле обертає їх і в точці максимального розширення.

А як щодо fit-content, stretchі інші? Наразі ці властивості переглядаються, і як такі вони не є стабільними (дата: липень 2018 р.). Вони будуть додані сюди, коли вони стануть трохи більш зрілими (сподіваємось, скоро).

Я знайшов відповідь @Wes дуже чіткою та ґрунтовною. Але для тих, хто шукає короткий:

мінімальний вміст:

мінімальна ширина, яку може мати вміст (група слів). Це означає ширину найбільшого слова у змісті.

приклад:

hi

this 

is

biggest-word-in-the-content

<------- min-content ------>

максимальний вміст:

максимальна ширина, яку вміст (група слів) може мати. Це означає ширину змісту, коли всі слова розташовані разом в одному рядку.

приклад:

hi this is a content without considering any line breaks.

<---------------------- max-content ------------------->