プログラム最終更新日:2022/09/28ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.cssで便利なやつ、そう、flex。昔はfloatでやってた2カラムな見た目ももう今はflexの時代ですよね。flexはバグ、というか仕様上謎の仕様も多く、予期しない見た目になってしまうことも。今回の子要素の「min-width:0」というのも予期しない見た目である「親要素のwidth指定を無視して中の子要素がはみ出しちゃう」っていうのを防ぐための方法なんですが、なぜmin-widht:0で防げるのかよくわからないで設定してる私みたいな人も多いんじゃないかなーと。いうことでここではなんでflexの子要素にmin-width:0を指定すると親要素のwidth指定が効くようになるのか、その理由をわかりやすく説明しますね。min-widthの初期値がキモflexの場合は「0」じゃない!てコトでまとめmin-widthの初期値がキモmin-widthって普段そんなにcssで指定しないですよね。このmin-width、指定しない場合は「auto」が初期値として割り振られます。省略したらその要素は「min-width:auto」を指定してる状態になってるよ~、ってコト。min-widthってどんだけ画面がちっちゃくなっても最低限この横幅だけは担保してね!約束だよ!っていう設定ですよね。これがautoってことは普通に考えたら別に画面の横幅とか気にせずにどんどん縮んでくれてOK!最悪横幅ゼロでもいいよ!って意味だと思いますよね。ある意味min-width:0と同じような動きをこちらとしては期待してるっていうか。普通の要素の場合はそうなってて、min-widthの「auto」と「0」はほぼ同じ意味になるんです。flexの場合は「0」じゃない!ただflexの場合はそうじゃなくなっちゃうんです。flexの場合、その子要素のmin-width:autoはその子要素が本来取るべき横幅になっちゃう、らしいのです。子要素の中に長文がずらずら書かれてると、その長文が折り返さなかった場合の横幅(これが本来取るべき横幅)がmin-widthに設定されてるのと同じ動きになるinputのようなブラウザが最小横幅を勝手に決めてる?ようなものだとその最小横幅(これが本来取るべき横幅)がmin-widthに設定されてるのと同じ動きになる私の場合は2でつまづいたんですが、普通にinput要素に「width:60%」とかを設定しても画面の横幅をちっさくしていくと普通にはみ出ちゃうんですよね。60%じゃないじゃん、と。}とmin-widthが知らない間に追加されてる感じだったわけです。このautoの値が0ならこっちの期待通りで「ぼく、どこまででも縮むよー」で問題ないんですが、flexの場合はそうじゃないので「ん?これ以上はおれっち縮まれねーよ?だってmin-width:autoが効いちゃってるし。・ら・にflexの子要素だもんオレ。ブラウザ様が決めてたり長文だったりしたらそれがmin-widthの値に設定されてるからそれ以上はちぢまれねーんだ」になっちゃうわけ。スマホで見たときとか、横幅が小さくなっちゃうとflexの親要素で指定してたwidthを突き破って子要素がはみでちゃう。コトでてコトでこっちで明示的に「いいや、よくお聞き、お前のmin-widthはゼロなの!」とflexの子要素に対して教えてあげることではみ出るのが解消するってワケ。上の方で出した例の1の場合、min-widthを指定しなくても子要素にwidthを固定値(%やらpxやら)で設定すればOKみたいです。何やら優先度が謎ですが、文字の回り込みの仕様自体がその文字の入っている要素の横幅基準だからで、それ基準でmin-widthが設定されるからだと思います。「この範囲で文字を入れろだって?おーけーおーけー、長文書いたよ。min-widthの採寸おねしゃす」ていう流れなんだと思います。まとめ今回はcssのflex要素で親要素にwidthを指定していても子要素がはみ出ちゃう現象にmin-width:0がなんで有効なのか書きました。まとめると「flexの子要素の場合はmin-width:autoがこっちが期待してるmin-width:0として動いてくれないから」っていうことになります。...うーん、そもそもflexの子要素のmin-width:autoが普通にゼロとしてふるまってくれればこんな挙動にならないハズ。何かflexの子要素だけmin-width:auto時の動きを独特にしなくちゃいけない理由があるのだと思いますが、、わかりづらいんでバグとしてどこかで直してもらいたいものですよね。/fabpot/goutteとweidner/goutteの違いって【laravel】joinのonでandを複数設定する方法にてる記事はコレ!インクスケープでsvg作成。