Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

min-content and max-content

max-content はサイズ指定キーワードで、コンテンツの内在的な最大サイズを表します。キーワードは、ソフトラップなしでコンテンツを表示させるために必要な最大サイズまで要素を拡大します。テキストコンテンツの場合、これはオーバーフローが発生しても、コンテンツがまったく折り返されないことを意味します。

interpolate-size プロパティと calc-size() 関数を使用して、max-content を始点・終点としたアニメーションを有効にすることができます。

固有サイズコンテンツサイズ

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`css.properties.height.max-content`	46	79	66	11	46	11
CSS プロパティ
`min-content`	46	79	66	11	46	11
`max-content`	46	79	66	11	46	11
`min-content`	46	79	66	11	46	11
`max-content`	46	79	66	11	46	11
`min-content`	46	79	66	11	46	11
`max-content`	46	79	66	11	46	11
`min-content`	46	79	66	11	46	11
`max-content`	46	79	66	11	46	11
`min-content`	46	79	66	11	46	11
`max-content` max-content はサイズ指定キーワードで、コンテンツの内在的な最大サイズを表します。キーワードは、ソフトラップなしでコンテンツを表示させるために必要な最大サイズまで要素を拡大します。テキストコンテンツの場合、これはオーバーフローが発生しても、コンテンツがまったく折り返されないことを意味します。	46	79	66	11	46	11
`min-content` min-content はサイズ指定キーワードで、要素の内在的な最小サイズを表します。このキーワードは、要素のコンテンツが、避けられるべきオーバーフローを発生させることなく、可能な限り最小のサイズに縮小されます。テキストコンテンツにおいて、このキーワードは可能な限り（単語間の空間など）改行を発生させ、要素の幅は最長の単語の幅に制限されます。	46	79	66	11	46	11

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

.tag {
  width: max-content;
}
.sidebar {
  width: min-content;
}
.grid {
  grid-template-columns: min-content 1fr;
}

ライブデモ

width: max-content

CSS Width: max-content demo.

プレビュー全画面表示

width: min-content

CSS Width: min-content demo.

プレビュー全画面表示

grid + min-content

CSS Grid + min-content demo.

プレビュー全画面表示

実務での使いどころ

コンテンツ量に応じた自動サイズ調整

タグやラベルにwidth: max-contentを適用し、テキスト量に応じて自動的に幅が調整されるレイアウトを作成します。

注意点

min-contentは長い単語がある場合に予期しない幅になることがあります。overflow-wrapと併用して制御してください。

参考リンク

MDN Web Docs — min-content and max-content

対応ブラウザ

基本構文

ライブデモ

width: max-content

width: min-content

grid + min-content

実務での使いどころ

コンテンツ量に応じた自動サイズ調整

注意点

アクセシビリティ

参考リンク