fit-content sizing
fit-content キーワードは fit-content(stretch) と同等です。実際には、ボックスは利用可能な空間を使用しますが、 max-content 以上にはならないことを意味します。
width, height, min-width, min-height, max-width, max-height のレイアウトされたボックスの大きさとして使用される場合、最大寸法と最小寸法は、コンテンツの寸法を参照します。
interpolate-size プロパティと calc-size() 関数を使用して、 fit-content との間でアニメーションをすることができます。
メモ: CSS ボックスサイズ指定の仕様書では、 fit-content() という関数も定義されています。このページではキーワード版について詳しく説明します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 46 | 79 | 94 | 11 | 46 | 11 | |
| CSS プロパティ | ||||||
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 |
注釈 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;
}ライブデモ
実務での使いどころ
-
タグ・ラベルのサイジング
テキスト長に応じた幅のタグやバッジを作成。短いテキストは短く、長いテキストは最大幅で折り返される。
-
サイドバー幅の自動調整
Grid レイアウトでサイドバーのカラムをコンテンツ幅に合わせつつ、上限を設定する。
注意点
- fit-content と fit-content() 関数は用途が異なる。前者はプロパティ値、後者は Grid トラックサイズ指定用の関数。
アクセシビリティ
- テキスト量が多い場合にコンテナが極端に小さくならないよう、min-width との併用を検討する。