注: このテキストの「幅」は CSS ではなく「論理的な幅」を指しますwidth。つまり、height言語の方向が垂直方向 (東アジア言語など) の場合や、フレックスボックスまたはグリッドの場合、値は CSS の にも有効です。およびmin-contentは、、、、、、、およびさらに多くのプロパティ (など)max-contentに有効な値です。widthheightmin-widthmin-heightmax-widthmax-heightflex-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; }

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

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