min-contentとmax-content値はCSSでどのように計算されますか？

そして、内在次元とはどういう意味ですか？

注：このテキストの「幅」は、CSSではなく「論理幅」を指しwidthます。つまりheight、言語の方向が垂直（東アジア言語のように）であるか、フレックスボックスまたはグリッド内にある場合、値はCSSに対しても有効です。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。実際、これら2つのプロパティの定義は、もともと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月）。それらはもう少し成熟したときに（願わくばすぐに）ここに追加されます。

@Wesの回答は非常に明確で徹底的であることがわかりました。しかし、簡単なものを探している人のために：

最小コンテンツ：

コンテンツ（単語のグループ）が持つことができる最小幅。これは、コンテンツの最大の単語の幅を意味します。

例：

hi

this 

is

biggest-word-in-the-content

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

max-content：

コンテンツ（単語のグループ）が持つことができる最大幅。これは、すべての単語が1行にまとめられたときのコンテンツの幅を意味します。

例：

hi this is a content without considering any line breaks.

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