[CSS]要素の幅指定widthとmax-width、どちらに100%と固定幅を指定すべきか

小さいスクリーンでは幅いっぱいに表示し、大きいスクリーンでは固定幅にする時、通常はwidthとmax-widthを使用します。
指定方法は「width: 100%; max-width: 600px;」でしょうか。

このwidthとmax-widthのどちらに100%と固定幅を指定すべきか、違いはあるのか？ 同じなのか？ そんな疑問を解決します。

A Tale of width and max-width

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

先週の記事（Considerations for Styling a Modal）のコメントにあった興味深い会話がきっかけになりました。

モーダルウインドウやコンテンツの幅を指定する時、小さいスクリーンでは最大幅で表示し、大きいスクリーンでは幅600pxで表示し、親要素からはみ出さないように幅を指定します。もちろん小さいスクリーンで水平のスクロールバーも無しです。
あなたは、どのようにそれを指定しますか？

1. width: 600px; max-width: 100%;
2. width: 100%; max-width: 600px;

1は幅は600pxで最大幅は100%、2は幅は100%で最大幅は600px。
多くの人は2で、幅は常に100%で、最大時は600pxまでね、という指定だと思います。1の指定だと、幅は600pxだけど最大時は100%で、は一見どのようになるのか想像しづらいかもしれません。

しかし答えは、どちらも同じです。どちらに指定するかは重要ではありません。

これについて人々のリアクションをみてましょう。

• 2番目の方が正しい。
• 非常に大きな相違がある。
• 2番目の方が親の幅にフレンドリー。
• 1番目はゴミ。
• 2番目がよりロジカルな方法でビヘイビアを記述している。

私はこの結果がショッキングであるということに同意します。

実際にその指定をしたデモを見てましょう。
上のボックスが「width: 600px; max-width: 100%;」
下のボックスが「width: 100%; max-width: 600px;」です。

No difference between these

要素は「max-width」で指定した値より親要素が広い時に、「max-width」の値が適用されます。
どういうことなのかというと、

• 親が1,000pxの幅の場合

  • 「width」は要素が600pxの幅であるべきだと伝えます。「max-width」のルールを破っていないため、600pxになります。
  • 「width」は要素が1,000pxの幅であるべきだと伝えます。「max-width」のルールを破っているため、要素が600pxになるよう強要します。

• 親が320pxの幅の場合

  • 「width」は要素が600pxの幅であるべきだと伝えます。「max-width」のルールを破っているため、320pxになります。そう320pxになるんです！
  • 「width」は要素が320pxの幅であるべきだと伝えます。「max-width」のルールを破っていないため、320pxになります。

親要素がより広い狭いかにかかわらず、widthとmax-widthのどちらに100%と固定幅を指定しても同じになることが分かります。

最後に、Twitterより、Flexboxのアイテムに使用すると相違があります。
参考: There's a difference when they're flex items