fit-content

これは値

e.g. width: fit-contentのようにして使う

雑に言えば、コンテンツの幅に合わせる、ということ

min-contentとmax-contentを組み合わせたもの

widthに指定した場合、widthが常に以下のような範囲に収まる

https://gyazo.com/10d43d47a4368ad2a3addf05926dc972 https://ishadeed.com/article/intrinsic-sizing-in-css/

上図のUse availableは、100%のことmrsekut.icon

親の幅を小さくしていくごとに、

max-content→100%→min-contentの順に遷移する

https://ishadeed.com/assets/intrinsic-sizing/fit-content.mp4

ユースケースたくさん

参考になる。

難しいなmrsekut.icon

そもそも、使う前に「子の幅(高さ)によって、幅(高さ)を変えたいか」を問う

これがyesの場合に、使うことを検討することになる

画像にも使えるんだ

min-contentの説明が、「一番長い単語の長さ」とかだから、画像に対して使うと意味不明になるな

「一番長い単語の長さ」という説明がおかしいのだろう

minmax()とかclamp()を連想したけど、ぜんぜん違う #??