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

製作 プログラム

最終更新日:2020/11/29

ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.

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固定値を設定したときは発生しない。

【おしらせ、というか完全なる宣伝】

文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.

こんなにも一ミリも目を引かれないタイトルを取り扱ってます: 続・マーガリン問題 / 爆弾岩についての考察 / 毎月5のつく日は /