widthが100%をオーバーするとき(flex-wrap神)

親要素に対して、子要素の幅が100％を超えるときの挙動の整理のため執筆しています。
※codepenですが、0.5×で見ていただくと綺麗にみることができます。

パターン1 | 親要素が600pxで子要素を50%ずつにする。

これは非常にシンプルです。
青セクションと赤セクションが半分になっていますね。

See the Pen widthが100をオーバーするとき by TakahiroOkada (@okalog) on CodePen.

パターン2 | 子要素間に余白を持たせたい場合。

codepenを見てもらえば分かりますが、文字がつまっていて読みづらいですよね。
多くの方は要素間にmarginやpaddingで余白を持たせると思います。

これを行おうと、このようなコードを書いてみました。

sytle.css

.left{
  width:50%;
  background-color:#B0C2FF;
}
.right{
  width:50%;
  margin-left:50px;
  background-color:#FFA7A7;
}

結果はこうなります。

See the Pen width整理-2 by TakahiroOkada (@okalog) on CodePen.

親要素に対して、,子要素が100%を超えてしまったのでずれてしまっていますね。

パターン3 | widthにcalc指定をして子要素の大きさ100%に調整する。

CSSには、calc()という便利な機能があります。
参考(https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html)

これを利用し子要素を100％になるように調整します。

See the Pen width整理-3 by TakahiroOkada (@okalog) on CodePen.

子要素が親要素に対して100％になりましたね。

番外編

実は最初flex-wrap:wrap;の指定なし、calc指定なし、margin-left:50px;だけでも綺麗にコンテナに収まっていました。

これはflex-wrapのデフォルトがno-wrapになっていたことで、コンテナからはみ出さないように指定されていたようです。
参考(https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap)
頭いいですよね。

See the Pen KKgwraz by TakahiroOkada (@okalog) on CodePen.

まとめ

いやー結構曖昧に使っていたので整理されてよかったです。