CSS fit-content キーワード
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2021年11月以降、すべてのブラウザーで利用可能です。
fit-content はサイズ指定キーワードで、コンテナー内でコンテンツに合わせて要素のサイズが調整されることを表します。
このキーワードを使用すると、要素のサイズが、その最小内在サイズ (min-content) を下回ったり、最大内在サイズ (max-content) を上回ったりすることがなくなります。
メモ:
このキーワードは、fit-content() 関数とは異なります。この関数は、グリッドトラックのサイズ指定（例えば grid-template-columns や grid-auto-rows など）や、width、height、 min-width、max-height などのプロパティに対するレイアウト済みボックスのサイズ指定に使用されます。
構文
/* サイズ指定プロパティ内で使用 */
width: fit-content;
height: fit-content;
inline-size: fit-content;
block-size: fit-content;
解説
このキーワードは、width、height、block-size、inline-size、 min-width、max-width などのサイズ指定プロパティと組み合わせて使用されます。これらのプロパティで使用されている場合、計算されるサイズは要素のコンテンツボックスを参照します。
fit-content が設定されている場合、要素はコンテンツに合わせて拡大または縮小しますが、関連する辺のサイズがコンテナーのサイズ制限に達すると、それ以上の拡大は停止します。
fit-content のサイズは、次の式を用いて計算されます。
min(max-content, max(min-content, stretch))
ここで、stretch は、要素のマージンボックスが、その包含ブロックの幅に一致します。このキーワードは、本質的に fit-content(stretch) と同等です。
interpolate-size プロパティと calc-size() 関数を使用すると、fit-content との間でアニメーションをすることができます。
例
fit-content を使用してボックスの大きさを指定
HTML
<div class="container">
<div class="item">アイテム</div>
<div class="item">もっとテキストの多いアイテム。</div>
<div class="item">
テキストを多く持つアイテム。できるだけ多くのテキストを追加したので、テキストが折り返し始めることを期待しています。
</div>
</div>
CSS
.container {
border: 2px solid #cccccc;
padding: 10px;
width: 20em;
}
.item {
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
結果
仕様書
| 仕様書 |
|---|
| CSS Box Sizing Module Level 4 # valdef-width-fit-content |
ブラウザーの互換性
関連情報
- 関連する大きさのキーワード:
min-content,max-content - CSS ボックスサイズ指定モジュール