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

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

##パターン1 | 親要素が600pxで子要素を50%ずつにする。
![Frame 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592040/52fd5eda-b734-3f73-bbc8-8e02b22e509c.png)

これは非常にシンプルです。
青セクションと赤セクションが半分になっていますね。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="okalog" data-slug-hash="ExgadrZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="widthが100をオーバーするとき">
  <span>See the Pen <a href="https://codepen.io/okalog/pen/ExgadrZ">
  widthが100をオーバーするとき</a> by TakahiroOkada (<a href="https://codepen.io/okalog">@okalog</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


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

![Frame 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592040/cef94ad7-10e3-698e-e312-9033447ac4f4.png)

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

```sytle.css
.left{
  width:50%;
  background-color:#B0C2FF;
}
.right{
  width:50%;
  margin-left:50px;
  background-color:#FFA7A7;
}
```
結果はこうなります。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="okalog" data-slug-hash="mdryQJQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="width整理-2">
  <span>See the Pen <a href="https://codepen.io/okalog/pen/mdryQJQ">
  width整理-2</a> by TakahiroOkada (<a href="https://codepen.io/okalog">@okalog</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


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

##パターン3 | widthにcalc指定をして子要素の大きさ100%に調整する。
CSSには、`calc()`という便利な機能があります。
参考(https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html)

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="okalog" data-slug-hash="RwGNqaq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="width整理-3">
  <span>See the Pen <a href="https://codepen.io/okalog/pen/RwGNqaq">
  width整理-3</a> by TakahiroOkada (<a href="https://codepen.io/okalog">@okalog</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

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

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="okalog" data-slug-hash="KKgwraz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="KKgwraz">
  <span>See the Pen <a href="https://codepen.io/okalog/pen/KKgwraz">
  KKgwraz</a> by TakahiroOkada (<a href="https://codepen.io/okalog">@okalog</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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