はじめに
本日はタイトルの通りですが、width: 100% と width: max-content の違いが業務上で出てきて、ぱっとわからなかったのでまとめてみたいと思います。
主な違い
主な違いは以下の2つです。
- 幅の計算方法
- レイアウトへの影響
1. 幅の計算方法
■ width: 100%
親要素の幅に対して相対的に計算されます。
親要素の width が 300px だったときは width: 100% を指定した子要素の幅も 300px になります。
この場合、width: 100% をつけなくても、同じ見た目になります。ブロック要素はデフォルトで親要素の幅いっぱいに広がるためです。
See the Pen Untitled by yamataikoku0114 (@yamataikoku0114) on CodePen.
■ width: max-content
子要素のコンテンツの最長幅に基づいて計算されます。
親要素がどの大きさであろうと、子要素はコンテンツの最長幅までしか伸びません。
なので、以下のようになります。
See the Pen Untitled by yamataikoku0114 (@yamataikoku0114) on CodePen.
2. レイアウトへの影響
文字数を増やしたときにどのような影響が出るでしょうか？
■ width: 100%
親要素をはみだしません。（日本語の場合）
コンテンツの量が増えたとしても、親要素いっぱいに広がった状態を保ち、親要素以上広がらないことが分かります。
See the Pen Untitled by yamataikoku0114 (@yamataikoku0114) on CodePen.
■ width: max-content
親要素の幅を超えてしまいます。
コンテンツ分だけ伸びてしまうことがわかります。
See the Pen Untitled by yamataikoku0114 (@yamataikoku0114) on CodePen.
まとめ
まだそこまで使ったことが無いので、どのようなユースケースで使い分けていくのが良いのかいまいち言語化できないので書きませんが、
width: max-content はコンテンツ分だけ伸びてしまい、オーバーフローしてしまう可能性があるので、使用するのには注意が必要だと思いました。
以下のような感じで、子要素の大きさに応じて、親要素の背景も広げたい（画像の後ろに背景色を少し付けたいなど）みたいな場合の一つの方法として使えそうな気はしました。
また、試してみて新しい発見があったら記事にしようと思います。
See the Pen Untitled by yamataikoku0114 (@yamataikoku0114) on CodePen.
参考文献