CSS fit-content キーワード

構文

/* サイズ指定プロパティ内で使用 */
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;
}

結果

仕様書

ブラウザーの互換性

関連情報

• 関連する大きさのキーワード: min-content, max-content
• CSS ボックスサイズ指定モジュール