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

fit-content sizing

width: auto ではコンテナ幅いっぱいに広がり、width: max-content ではテキストが折り返されなくなる。fit-content はコンテンツの自然な幅に収まりつつ、利用可能な幅を超えない最適なサイズを提供する。Grid の grid-template-columns で fit-content() 関数として使うことも可能。

サイジング

概要

width: auto ではコンテナ幅いっぱいに広がり、width: max-content ではテキストが折り返されなくなる。fit-content はコンテンツの自然な幅に収まりつつ、利用可能な幅を超えない最適なサイズを提供する。Grid の grid-template-columns で fit-content() 関数として使うことも可能。

対応ブラウザ

デスクトップ

Chrome 46+
Edge 79+
Safari 11+
Firefox 94+

モバイル

Chrome Android 46+
Safari iOS 11+
Firefox Android 94+

基本構文

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

/* Grid での fit-content() 関数 */
.grid {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr;
}

実務での使いどころ

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

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

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

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

注意点

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

アクセシビリティ

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

参考リンク