ラムネグから一言:無料アプリを3つ作りました。記事下部にリンクがあるので見てみてくださいね。さっそくみてみる
cssのflexはときどき予期してない挙動をして悩まされる。
今回はflexと子要素のwidth固定値が組み合わさるとはみ出しちゃう問題について。
left
right-child
めっちゃ見づらいけどこんなんになる。
解決方法
さっきの例はこういう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固定値を設定したときは発生しない。