要素のサイズ設定時に使用できるキーワードを試してみる

要素のサイズ設定時に使用できるキーワードのstretch・fit-content・min-content・max-contentをそれぞれ試してみます。

stretch

stretchは要素のmarginを含めたサイズを使用するキーワードです。
例として、左右に余白を持ったコンテンツを実装するとします。

<div class="contents-before">
  コンテンツ
</div>

<div class="contents-after">
  コンテンツ
</div>

左右にmarginで余白を持っている要素にwidthを設定したい場合、calc()を使うことで設定可能です。

.contents-before {
  width: calc(100% - 100px);
  margin-inline: 50px;
  background-color: tomato;
}

stretchを使うことで、より簡潔に記述できます。

.contents-after {
  width: stretch;
  margin-inline: 50px;
  background-color: aqua;
}

ただし、記事作成時点で対応しているブラウザはchromeとedgeの138以降(2025年6月)のみとなっていて、FirefoxとSafariはベンダープレフィックスが必要になります。

.contents-after {
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
  margin-inline: 50px;
  background-color: aqua;
}

stretchのデモページ

fit-content

fit-contentはコンテンツ内容に合わせてサイズが決まるキーワードです。
例として、見出しのテキスト量に合わせてborderを設定する実装をしてみます。

<h2 class="ttl">見出しタイトル</h2>

.ttl {
  width: fit-content;
  margin-inline: auto;
  border-bottom: 2px solid tomato;
}

fit-contentのデモページ

min-content

min-contentはコンテンツ内容の最小サイズに合わせてサイズが決まるキーワードです。
まずは動作を確認してみます。

<div class="contents">
  コンテンツ
</div>

<div class="contents">
  This is a pen.
</div>

.contents {
  width: min-content;
  background-color: tomato;
}

デモページを確認するとわかるように、1つ目の.contentsでは日本語1文字をwidthとして設定、2つ目の.contentsでは英語の1単語をwidthとして設定されています。
min-contentのデモページ

使用例としては、キャプション付き画像で幅を画像に合わせて設定するという実装などで使用できます。
実装の比較として、fit-contentを使ったパターンも合わせて試してみます。

<figure class="figure-before">
  <img src="img.jpg" alt="">
  <figcaption>キャプションテキスト</figcaption>
</figure>

<figure class="figure-before">
  <img src="img.jpg" alt="">
  <figcaption>キャプションテキストキャプションテキストキャプションテキストキャプションテキストキャプションテキスト</figcaption>
</figure>

<figure class="figure-after">
  <img src="img.jpg" alt="">
  <figcaption>キャプションテキスト</figcaption>
</figure>

<figure class="figure-after">
  <img src="img.jpg" alt="">
  <figcaption>キャプションテキストキャプションテキストキャプションテキストキャプションテキストキャプションテキスト</figcaption>
</figure>

.figure-beforeにfit-content、.figure-afterにmin-contentを設定します。

.figure-before {
  width: fit-content;
  margin-inline: auto;
}
.figure-after {
  width: min-content;
  margin-inline: auto;
}

fit-contentの場合はキャプションが長い場合にその長さがコンテンツ幅になってしまいますが、min-contentの場合はキャプションが長い場合も画像幅がコンテンツ幅になります。
min-contentのデモページ2

max-content

max-contentはコンテンツ内容の最大サイズに合わせてサイズが決まるキーワードです。
動作を確認してみます。

<div class="contents">
  コンテンツ
</div>

<div class="contents">
  This is a pen.
</div>

<div class="contents">
  コンテンツサンプル。コンテンツサンプル。コンテンツサンプル。コンテンツサンプル。コンテンツサンプル。コンテンツサンプル。コンテンツサンプル。コンテンツサンプル。コンテンツサンプル。コンテンツサンプル。コンテンツサンプル。コンテンツサンプル。コンテンツサンプル。コンテンツサンプル。コンテンツサンプル。
</div>

.contents {
  width: max-content;
  background-color: tomato;
}

コンテンツ量に応じてサイズが決まるのはfit-contentと似ていますが、親要素より大きくなる場合でも折り返さないではみ出す点が異なります。

max-contentのデモページ

使用例としては、パンくずリストなどで長すぎる場合に横スクロールバーを表示したい、という実装などで使用できます。

<nav class="topicpath">
  <ul class="topicpath_list">
    <li class="topicpath_item"><a href="">パンくず内容</a></li>
    <li class="topicpath_item"><a href="">パンくず内容</a></li>
    <li class="topicpath_item">パンくず内容</li>
  </ul>
</nav>

.topicpath {
  width: 100%;
  overflow-x: auto;
}
.topicpath_list {
  display: flex;
  column-gap: 20px;
  width: max-content;
}

これでパンくずが長い場合にスクロールされるようになりました。
max-contentのデモページ2