CSSには、内因性と外因性の2つのサイズ指定方法がある。一般的な方法は外因性で、要素の幅や高さに固定値を使用する。内因性は、要素内のコンテンツのサイズに依存して要素のサイズが決まる。
- min-content：内因性の最小幅で、テキストの場合、要素のコンテンツで最も長い単語の幅に等しくなる
- max-content：内因性の優先幅で、コンテンツの幅に等しくなる。この幅は動的なので、テキストが変更されるとそれに応じて幅が変更される
- fit-content：min-contentとmax-contentを組み合わせたもの。利用可能領域 < max-contentでない限り利用可能領域を使用し、利用可能領域 > min-contentでない限りmin-contentを使用する
※利用可能領域（available）は、ビューポートで使用可能なスペースのこと
figure {
width: max-content;
margin-left: auto;
margin-right: auto;
}上記の例はfigure要素が画像の幅に合わせたサイズになることで、キャプションも画像の幅に折り返される。ただし、画像の幅がビューポートより小さい場合は問題ないが、大きい場合には横スクロールが表示されてしまう。
この問題を解決するには、fit-contentを使用する必要がある。fit-contentを使うと、画像の幅はビューポートを超えることはない。
【参考】
https://coliss.com/articles/build-websites/operation/css/intrinsic-sizing-in-css.html
