min-content and max-content

概要

min-contentはコンテンツがオーバーフローしない最小幅（単語の最長幅等）を、max-contentはコンテンツが改行せずに表示できる最大幅を表します。FlexboxやGridレイアウトと組み合わせて、コンテンツに応じた柔軟なサイズ設定を実現します。固定値に頼らないコンテンツ駆動型のレイアウト設計に不可欠です。

対応ブラウザ

基本構文

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

実務での使いどころ

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

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

注意点

アクセシビリティ

• min-contentやmax-contentによるサイズ変動でテキストが意図せず小さくなったり切れたりしないよう確認してください。

参考リンク

• MDN Web Docs — min-content and max-content