fit-content, max-content, min-content
問題
CSSのブロックレベル要素はデフォルトで width: auto となり、コンテナいっぱいに広がります。要素をコンテンツに合わせて縮小したい場合（タグ、ツールチップ、ブロックスタイルのCTAボタンなど）、AIエージェントは通常 width: auto（デフォルトなので何もしない）や width: 100%（必要なことの逆）を使いがちです。内在サイジングキーワード（intrinsic sizing keywords）の fit-content、max-content、min-content はこの問題を直接解決しますが、AIエージェントはこれらをほとんど使いません。
解決方法
CSSは、要素がコンテンツに基づいてサイズを決定するための3つの内在サイジングキーワードを提供しています：
fit-content— 要素はコンテンツに合わせて縮小しますが、コンテナ幅を超えることはありません。最もよく必要とされる動作です。max-content— 要素はすべてのコンテンツを1行に収めるように拡張します。コンテナからはみ出すことがあります。min-content— 要素は最小の分割不可能なコンテンツ（最も長い単語など）がオーバーフローしない最も狭い幅に縮小します。
コード例
ブロック要素をコンテンツに合わせて縮小する
/* The element is as wide as its content, up to the container width */
.tag {
width: fit-content;
padding: 0.25rem 0.75rem;
background: #e0e7ff;
border-radius: 9999px;
}
<div class="tag">New Feature</div>
<div class="tag">A longer tag label that still shrinks to fit</div>
width: fit-content がなければ、各 .tag は親要素いっぱいに広がります。これを付けることで、各タグはテキストとパディング分の幅だけになります。
縮小フィット要素のセンタリング
コンテンツと同じ幅でブロック要素をセンタリングする一般的なパターン：
.centered-tag {
width: fit-content;
margin-inline: auto;
}
display: inline-block に切り替えて text-align: center の親で囲むよりもクリーンです。
3つのキーワードの比較
.min {
width: min-content;
/* Shrinks to the longest word. Text wraps aggressively. */
}
.max {
width: max-content;
/* Expands to fit all content on one line. May overflow container. */
}
.fit {
width: fit-content;
/* Like max-content, but capped at the container width. */
}
<div class="container" style="width: 300px; border: 1px solid #ccc;">
<div class="min">This text wraps at every opportunity</div>
<div class="max">This text stays on one line even if it overflows the container</div>
<div class="fit">This text stays on one line if it fits, otherwise wraps at 300px</div>
</div>
固定幅カラムでの min-content の使用
min-content はグリッドレイアウトで、カラムを最も狭いコンテンツに合わせたい場合に便利です：
.table-layout {
display: grid;
grid-template-columns: min-content 1fr min-content;
gap: 1rem;
}
<div class="table-layout">
<span>Status</span>
<span>Description of the item that can be long</span>
<span>Actions</span>
</div>
最初と最後のカラムはコンテンツに合わせて縮小し、中央のカラムが残りのスペースを取ります。
グリッドでの fit-content() 関数
fit-content() 関数（括弧付き）はグリッドトラックサイジング専用です。最大長さの引数を受け取ります：
.sidebar-layout {
display: grid;
grid-template-columns: fit-content(300px) 1fr;
gap: 2rem;
}
サイドバーカラムはコンテンツに合わせて縮小しますが、300px を超えることはありません。これは minmax(auto, 300px) とは異なり、fit-content() はスペースが余っていてもコンテンツ幅を超えて拡張しません。
実用例：通知バッジ
.badge {
display: block;
width: fit-content;
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
background: #ef4444;
color: white;
border-radius: 9999px;
}
<span class="badge">3</span>
<span class="badge">99+</span>
各バッジはコンテンツにぴったりの幅になります。固定幅もオーバーフローもありません。
ライブプレビュー
AIがよくやるミス
width: fit-contentが必要な場面でwidth: autoを使っている。 ブロック要素のwidth: autoは「コンテナいっぱいに広がる」という意味で、コンテンツへの縮小フィットとは逆です。AIエージェントはautoが「自動サイジング」を意味すると思いがちです。- 縮小フィットのワークアラウンドとして
display: inline-blockを使っている。inline-blockは確かに縮小フィット動作を引き起こしますが、要素のフォーマットコンテキストを変更し、配置の問題を引き起こす可能性があります。width: fit-contentは display タイプを変更せずに同じサイジングを実現します。 fit-content（キーワード）とfit-content()（関数）を混同している。 キーワードはwidth、height、min-widthなどが値を受け取る場所ならどこでも使えます。関数はグリッドトラックサイジング（grid-template-columns、grid-template-rows）でのみ有効です。fit-contentが必要な場面でmax-contentを使っている。max-contentはコンテナ幅を無視するためオーバーフローを引き起こす可能性があります。fit-contentがほぼ常に安全な選択です。- 縮小すべき要素に
width: 100%を設定している。 AIエージェントはボタン、タグ、バッジにwidth: 100%を頻繁に適用し、コンテンツに合わせてサイズを決めるべきところでコンテナいっぱいに広がらせてしまいます。 min-contentがテキストを積極的に折り返すことを忘れている。 すべてのソフトラップの機会で改行されるため、非常に狭く読みにくい要素になる可能性があります。主にグリッドトラックサイジングに便利で、一般的な要素幅には向いていません。
使い分け
fit-content
- コンテンツに合わせて縮小すべきブロック要素：タグ、バッジ、ツールチップ、キャプション
margin-inline: autoでコンテンツ幅の要素をセンタリング- 「コンテンツと同じ幅で、コンテナより広くならない」ことが必要なすべてのシナリオ
max-content
- コンテンツの自然な1行幅を知る必要がある、または強制する必要がある場合
- アニメーションや測定のための内在サイズの計算
- オーバーフローする可能性があるため、最終レイアウトにはほとんど使われない
min-content
- できるだけ狭くしたいグリッドカラム（アイコンカラム、ステータスラベル）
- 要素がオーバーフローする前に必要な最小スペースの把握
- テキストを積極的に折り返すため、単独の
width値としてはほとんど使われない
fit-content() 関数
- カラムをコンテンツに合わせて縮小しつつ最大幅に制限したいグリッドトラックサイジング
- サイドバーレイアウト：
grid-template-columns: fit-content(250px) 1fr
Tailwind CSS
Tailwind は内在サイジングのための w-fit、w-min、w-max ユーティリティを提供しています。