【CSS】max-widthが効かない原因7選！widthとの違いや対策

CSSでレスポンシブ対応をしていると、max-width: 100%;やmax-width: 640px;を書いたのに「効いていない」「画像がはみ出る」「カード幅が思った通りにならない」と悩むことはありませんか？max-widthは「これ以上は大きくしない」という最大幅の指定です。要素をその幅まで広げる指定ではないため、widthとの違いを理解することが大切です。

この記事では、max-widthの基本、効かない原因、画像・カード・flex itemでの対策まで解説します。

CSSのmax-widthとは？

max-widthとは、要素の最大幅を指定するCSSです。

.container {
  max-width: 960px;
}

この指定は「最大でも960pxまで」という意味です。画面幅が狭い場合は、親要素や内容に合わせて960pxより小さくなることがあります。

widthとの違い

widthは基本の幅を指定し、max-widthは上限を指定します。

指定	意味	例
width	要素の幅を指定する	width: 100%;
max-width	これ以上大きくしない上限を指定する	max-width: 960px;
min-width	これ以下に小さくしない下限を指定する	min-width: 320px;

レスポンシブで中央寄せする定番は、width: 100%;、max-width、margin: 0 auto;を組み合わせる書き方です。

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

原因1：max-widthだけを書いている

max-widthは最大幅の指定なので、要素をその幅まで広げる指定ではありません。

.box {
  max-width: 640px;
}

この場合、要素の内容が短ければ、640pxまで広がらないことがあります。

.box {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

width: 100%;で親幅いっぱいに広げつつ、max-widthで上限を決めると、レスポンシブ対応しやすくなります。

max-widthは「広げる指定」ではなく「広がりすぎを止める指定」です。必要に応じてwidthと組み合わせましょう。

原因2：親要素の幅が狭い

max-width: 960px;を指定しても、親要素が600pxしかなければ、子要素は基本的にその範囲内で表示されます。

<div class="parent">
  <div class="child">中身</div>
</div>

.parent {
  width: 600px;
}

.child {
  max-width: 960px;
}

この場合、.childが960pxまで広がらないのは自然です。

max-widthの基準は、親要素や利用できる幅の影響を受けます。親要素の幅も一緒に確認しましょう。

原因3：inline要素に指定している

spanや通常のaタグのようなインライン要素では、幅の指定が意図通りに効きにくいことがあります。

.label {
  max-width: 200px;
}

.label {
  display: inline-block;
  max-width: 200px;
}

max-widthを効かせたい場合は、対象要素のdisplayを確認しましょう。

原因4：min-widthがmax-widthより優先されている

min-widthは最小幅の指定です。MDNでも、min-widthはmax-widthより優先されると説明されています。

.box {
  max-width: 300px;
  min-width: 500px;
}

この場合、max-width: 300px;を書いていても、min-width: 500px;の影響で300pxまで小さくなりません。

対策：min-widthを確認する

テーマやコンポーネントのCSSでmin-widthが指定されていると、max-widthが効かないように見えます。

.box {
  min-width: 0;
  max-width: 300px;
}

特にFlexboxの子要素では、min-width: 0;が必要になるケースがあります。

max-widthが効かないときは、同じ要素や親要素にmin-widthが指定されていないか確認しましょう。

原因5：paddingやborderで見た目の幅が大きくなっている

max-widthを指定していても、paddingやborderの分だけ見た目の幅が大きくなることがあります。

.box {
  max-width: 320px;
  padding: 24px;
  border: 1px solid #d8e2ea;
}

初期状態のbox-sizing: content-box;では、幅にpaddingやborderが足されるため、見た目上は320pxを超えて見えることがあります。

対策：box-sizing: border-box;を使う

実務では、次の指定を入れておくことが多いです。

* {
  box-sizing: border-box;
}

これにより、paddingやborderを含めて幅を計算しやすくなります。

max-widthを指定しているのに見た目がはみ出る場合は、padding・border・box-sizingを確認しましょう。

原因6：画像や動画にwidthが指定されていない

画像をレスポンシブ対応させる場合は、max-width: 100%;だけでなく、height: auto;もセットで使うことが多いです。

img {
  max-width: 100%;
  height: auto;
}

画像をブロックとして扱いたい場合は、display: block;も指定します。

img {
  display: block;
  max-width: 100%;
  height: auto;
}

画像や動画の横幅だけを縮めて高さを固定すると、縦横比が崩れることがあります。基本はheight: auto;をセットで考えましょう。

原因7：Flexboxの子要素が縮まない

Flexbox内の子要素で、max-widthを指定しているのに横にはみ出る場合があります。

これは、長い英単語やURL、コードなどが折り返されず、子要素が縮みにくくなっているケースです。

.flex-item {
  min-width: 0;
  max-width: 100%;
}

.flex-item p {
  overflow-wrap: anywhere;
}

Flexboxの子要素では、min-width: 0;を指定すると、親幅に合わせて縮みやすくなることがあります。

max-widthが効かないときのチェックリスト

確認項目	見るポイント	対策
width	max-widthだけで広げようとしていないか	width: 100%;と組み合わせる
親要素	親の幅が狭すぎないか	親のwidthやmax-widthを確認する
display	inline要素に指定していないか	inline-blockやblockにする
min-width	最小幅が邪魔していないか	min-width: 0;などを検討する
box-sizing	paddingやborderで大きく見えていないか	box-sizing: border-box;を使う
画像・動画	縦横比が崩れていないか	height: auto;を指定する

公式ドキュメントも確認する

max-widthの仕様を正確に確認したい場合は、MDN Web Docsの公式情報も参考になります。

• MDN Web Docs max-width
• MDN Web Docs box-sizing
• MDN Web Docs display

まとめ：max-widthはwidthや親要素とセットで考えよう

この記事では、CSSのmax-widthが効かない原因を解説しました。max-widthは最大幅の指定であり、要素をその幅まで広げる指定ではありません。width、親要素、display、min-width、box-sizingをセットで確認しましょう。

レスポンシブでよく使う基本形は、次の書き方です。

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

画像や動画ではmax-width: 100%;とheight: auto;、Flexbox内ではmin-width: 0;も確認すると、はみ出しや幅指定のトラブルを防ぎやすくなります。