【解決】flexの子要素にwidth固定値を入れるとはみ出しちゃう問題

cssのflexはときどき予期してない挙動をして悩まされる。

今回はflexと子要素のwidth固定値が組み合わさるとはみ出しちゃう問題について。

めっちゃ見づらいけどこんなんになる。

解決方法

さっきの例はこういうHTMLになってる。

<div class="flex">
  <div class="flex-left">left</div>
  <div class="flex-right">
    <div class="flex-right-child">right-child</div>
  </div>
</div>

右側ピンクのflexアイテムの中にさらにflex-right-childっていう要素があって、こいつにwidh固定値を設定すると上記のはみ出しちゃう現象が出てくる。

子要素っていうよりflexからすると孫要素に当たる。

解決方法は、

.flex-right-child{
  width: 700px;
  max-width: 100%;
}

を、

.flex-right-child{
  width: 100%;
  max-width: 700px;
}

にする。widthの値を固定値にしないようにする。コレで治る。

画像のwrapperのサイズをwidthで決め打ちしてるようなときに起こりやすい…と思う。というか今回それで発生しちゃった。

ちなみに孫要素以降のひ孫などでも発生しちゃう。…なんでか孫以降の画像に対してwidth固定値を設定したときは発生しない。