CSS

A function that sizes to fit the content but never grows beyond a limit you set—handy for buttons, labels, or grid columns to stay neatly contained.

fit-content()

やさしい説明

fit-content() は「中身に合わせてサイズを決めるけど、この上限は越えないでね」とお願いする関数です。自動でちょうどいい幅（または高さ）にしつつ、上限のフタを付けるイメージです。

ボタンやタグのように文字数に合わせて程よく伸び縮みさせたいとき、あるいは Grid の列幅を“中身優先だけど最大○○まで”にしたいときに便利です。

正確な説明

fit-content(X) は、要素やグリッドトラックのサイズを「内容に必要なサイズ」と「指定した上限 X」のうち小さい方に決めます。式で表すなら、実際のサイズ = min(内容に必要なサイズ, X)（レイアウト上の最小サイズなども併せて考慮されます）。

使える場所
width / height などのサイズ指定、grid-template-columns / grid-template-rows のトラックサイズ。
引数の型
px / rem / ch / % / vh などの長さ・割合。

使いどころ（よくあるパターン）

ボタンやタグを“ちょうど良く”
width: fit-content(20rem); のように指定すると、中身に合わせて広がるが最大 20rem で止まります。
ラベル列に上限を付ける Grid
grid-template-columns: fit-content(16ch) 1fr; のようにすると、1 列目は内容に合わせるが最大 16 文字分まで、2 列目は残りを使います。
ポップアップの高さに上限
height: fit-content(60vh); で中身に合わせつつ、画面の 60% を上限にできます。

CSS

.chip {
    padding: 0.25rem 0.5rem;
    border: 1px solid #ccc;
    width: fit-content(20rem);   /* 中身に合わせるが最大 20rem */
    overflow-wrap: anywhere;     /* 長い単語のはみ出し対策 */
}

CSS

.grid {
    display: grid;
    grid-template-columns: fit-content(12ch) 1fr;  /* 1 列目は中身優先 + 上限 12ch */
    gap: 0.75rem;
}

ミニサンプル

HTML

<div class="grid demo">
    <div class="label">User name</div>
    <input class="field" type="text" placeholder="your-id">
    <div class="label">VeryLongLabelWithoutBreaks</div>
    <input class="field" type="text" placeholder="auto-fit with cap">
</div>

CSS

.grid.demo {
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: fit-content(16ch) 1fr;
    align-items: center;
}
.grid.demo .label { overflow-wrap: anywhere; }
.grid.demo .field { inline-size: 100%; }

ラベル列は内容に合わせて広がりますが、最大 16 文字分で止まり、残りのスペースは入力欄が受け持ちます。長い英単語も overflow-wrap: anywhere; で折り返せます。

よくあるつまずき（注意点）