width: 100% と width: max-content の違い

# はじめに

本日はタイトルの通りですが、`width: 100%` と `width: max-content` の違いが業務上で出てきて、ぱっとわからなかったのでまとめてみたいと思います。

# 主な違い

主な違いは以下の2つです。

1. 幅の計算方法
2. レイアウトへの影響

## 1. 幅の計算方法

■ `width: 100%`

親要素の幅に対して相対的に計算されます。

親要素の `width` が `300px` だったときは `width: 100%` を指定した子要素の幅も `300px` になります。

この場合、`width: 100%` をつけなくても、同じ見た目になります。ブロック要素はデフォルトで親要素の幅いっぱいに広がるためです。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="pvzgZdb" data-pen-title="Untitled" data-user="yamataikoku0114" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/yamataikoku0114/pen/pvzgZdb">
Untitled</a> by yamataikoku0114 (<a href="https://codepen.io/yamataikoku0114">@yamataikoku0114</a>)
on <a href="[https://codepen.io](https://codepen.io/)">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

■ `width: max-content`

子要素のコンテンツの最長幅に基づいて計算されます。

親要素がどの大きさであろうと、子要素はコンテンツの最長幅までしか伸びません。

なので、以下のようになります。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zxOrLgj" data-pen-title="Untitled" data-user="yamataikoku0114" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/yamataikoku0114/pen/zxOrLgj">
Untitled</a> by yamataikoku0114 (<a href="https://codepen.io/yamataikoku0114">@yamataikoku0114</a>)
on <a href="[https://codepen.io](https://codepen.io/)">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 2. レイアウトへの影響

文字数を増やしたときにどのような影響が出るでしょうか？

■ `width: 100%`

親要素をはみだしません。（日本語の場合）

コンテンツの量が増えたとしても、親要素いっぱいに広がった状態を保ち、親要素以上広がらないことが分かります。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wBwMEwG" data-pen-title="Untitled" data-user="yamataikoku0114" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/yamataikoku0114/pen/wBwMEwG">
Untitled</a> by yamataikoku0114 (<a href="https://codepen.io/yamataikoku0114">@yamataikoku0114</a>)
on <a href="[https://codepen.io](https://codepen.io/)">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

■ `width: max-content`

親要素の幅を超えてしまいます。

コンテンツ分だけ伸びてしまうことがわかります。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LEPGJPM" data-pen-title="Untitled" data-user="yamataikoku0114" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/yamataikoku0114/pen/LEPGJPM">
Untitled</a> by yamataikoku0114 (<a href="https://codepen.io/yamataikoku0114">@yamataikoku0114</a>)
on <a href="[https://codepen.io](https://codepen.io/)">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# まとめ

まだそこまで使ったことが無いので、どのようなユースケースで使い分けていくのが良いのかいまいち言語化できないので書きませんが、

width: max-content はコンテンツ分だけ伸びてしまい、オーバーフローしてしまう可能性があるので、使用するのには注意が必要だと思いました。

以下のような感じで、子要素の大きさに応じて、親要素の背景も広げたい（画像の後ろに背景色を少し付けたいなど）みたいな場合の一つの方法として使えそうな気はしました。

また、試してみて新しい発見があったら記事にしようと思います。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KwPVByz" data-pen-title="Untitled" data-user="yamataikoku0114" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/yamataikoku0114/pen/KwPVByz">
Untitled</a> by yamataikoku0114 (<a href="https://codepen.io/yamataikoku0114">@yamataikoku0114</a>)
on <a href="[https://codepen.io](https://codepen.io/)">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 参考文献

https://developer.mozilla.org/ja/docs/Web/CSS/max-content

https://coliss.com/articles/build-websites/operation/css/intrinsic-sizing-in-css.html

https://learning.mihune-web.com/max-content_min-content/