max-widthとbox-sizingについて

10年以上web系プログラマをやっているが、CSSに関してはまじで苦手。
今回はまったのは、max-widthを指定している箇所に対してwidth:100%のboxみたいなCSSを書いた場合にはみ出てしまう問題が発生した。

はみ出す原因

width: 100%がContentの幅になるので、margin, padding, borderといった部分ははみ出す。

box-sizignを使えばいい。

こんな感じに書けば解決される

1
2
3
4
5

.container {
  max-width: 640px;
  box-sizing: border-box;
  margin: auto;
}

marginがまだはみ出る

なんか知らないけど box-sizing: border-box にしてもmargin分ははみ出してしまう。
この問題どうしようか・・・。

とりあえず width: calc(100% - 20px) みたいな感じでmargin分のサイズを引くように対応した。
(だったらbox-sizingじゃなくてmarginやpaddingも引いてあげればいいのでは？)

最後に

CSSに関する知見が0なので、どういう対処方法がベストなのか誰か教えて下さい。

参考

【CSS / HTML】width の外になぜはみ出すの？基本の基本の復習