Widely available YES。主要ブラウザで対応済み。コンテンツに応じたサイジングに有用。

fit-content sizing

fit-content はサイズ指定キーワードで、コンテナー内でコンテンツに合わせて要素のサイズが調整されることを表します。 このキーワードを使用すると、要素のサイズが、その最小内在サイズ (min-content) を下回ったり、最大内在サイズ (max-content) を上回ったりすることがなくなります。

サイジング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
fit-content
46
79
94
11
46
11
fit-content
46
79
94
11
46
11
fit-content
46
79
94
11
46
11
fit-content
46
79
94
11
46
11
fit-content
46
79
94
11
46
11
fit-content
46
79
94
11
46
11
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (22)
  • 以前は別名で対応していました: intrinsic (1)
削除済み
  • このバージョンで機能が削除されました (48)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (3)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
  • 以前は別名で対応していました: intrinsic (2)
注釈 3件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (25)
  • 以前は別名で対応していました: intrinsic (18)
削除済み
  • このバージョンで機能が削除されました (48)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
  • 以前は別名で対応していました: intrinsic (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (41)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (9)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (9)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (25)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • ベンダープレフィックス付きで対応: -moz- (3)
実装メモ
  • Firefox は、CSS3 Basic Box で指定された定義を実装します。 これは「利用可能」を定義するものであり、「適合可能」を定義するものではありません。 また、`fit-content` の定義は CSS3 Sizing よりも単純です。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
  • 以前は別名で対応していました: intrinsic (2)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (25)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
  • 以前は別名で対応していました: intrinsic (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (25)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • ベンダープレフィックス付きで対応: -moz- (3)
実装メモ
  • Firefox は、CSS3 Basic Box で指定された定義を実装します。 これは「利用可能」を定義するものであり、「適合可能」を定義するものではありません。 また、`fit-content` の定義は CSS3 Sizing よりも単純です。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
  • 以前は別名で対応していました: intrinsic (2)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (25)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
  • 以前は別名で対応していました: intrinsic (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (25)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (3)
実装メモ
  • Firefox は、CSS3 Basic Box で指定された定義を実装します。 これは「利用可能」を定義するものであり、「適合可能」を定義するものではありません。 また、`fit-content` の定義は CSS3 Sizing よりも単純です。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
  • 以前は別名で対応していました: intrinsic (2)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (25)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
  • 以前は別名で対応していました: intrinsic (1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (25)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -moz- (3)
実装メモ
  • Firefox は、CSS3 Basic Box で指定された定義を実装します。 これは「利用可能」を定義するものであり、「適合可能」を定義するものではありません。 また、`fit-content` の定義は CSS3 Sizing よりも単純です。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (25)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (7)

基本構文

CSS 
.tag {
  width: fit-content;
  padding: 0.25rem 0.75rem;
  background: #e2e8f0;
  border-radius: 9999px;
}

/* The fit-content() function in Grid */
.grid {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr;
}

ライブデモ

タグ（fit-content）

fit-content sizing の タグ（fit-content） パターンです。

プレビュー全画面表示

見出し下線

fit-content sizing の 見出し下線 パターンです。

プレビュー全画面表示

Grid fit-content()

fit-content sizing の Grid fit-content() パターンです。

プレビュー全画面表示

実務での使いどころ

  • タグ・ラベルのサイジング

    テキスト長に応じた幅のタグやバッジを作成。短いテキストは短く、長いテキストは最大幅で折り返される。

  • サイドバー幅の自動調整

    Grid レイアウトでサイドバーのカラムをコンテンツ幅に合わせつつ、上限を設定する。

注意点

  • fit-content と fit-content() 関数は用途が異なる。前者はプロパティ値、後者は Grid トラックサイズ指定用の関数。

アクセシビリティ

  • テキスト量が多い場合にコンテナが極端に小さくならないよう、min-width との併用を検討する。

参考リンク