CSS INTRINSIC SIZING

min-content / max-content / fit-content を目で理解する

CSSの幅は、親だけでなく中身からも決まります。 3つを並べると、縮む・はみ出す・親幅で止まるの違いが見えやすいです。

Try resizing 親幅を変えて、幅の決まり方を見る

Parent width

min-content できるだけ小さく

Design System Migration

width: min-content;

max-content 折り返さずに入る幅

Design System Migration

width: max-content;

fit-content 必要分だけ、でも親幅まで

Design System Migration

width: fit-content;

Point

`min-content` は最小、`max-content` は折り返さない幅、`fit-content` は中身に合わせつつ親幅で止まる幅です。