【css】flexで子要素をmin-width:0するのはナゼ？

cssで便利なやつ、そう、flex。

昔はfloatでやってた2カラムな見た目ももう今はflexの時代ですよね。

ただflexはバグ、というか仕様上謎の仕様も多く、予期しない見た目になってしまうことも。今回の子要素の「min-width:0」というのも予期しない見た目である「親要素のwidth指定を無視して中の子要素がはみ出しちゃう」っていうのを防ぐための方法なんですが、なぜmin-widht:0で防げるのかよくわからないで設定してる私みたいな人も多いんじゃないかなーと。

ということでここではなんでflexの子要素にmin-width:0を指定すると親要素のwidth指定が効くようになるのか、その理由をわかりやすく説明しますね。

1. min-widthの初期値がキモ
2. flexの場合は「0」じゃない！
3. てコトで
4. まとめ

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はその子要素が本来取るべき横幅になっちゃう、らしいのです。

ちょっとわかりづらいんで例を挙げると、

1. 子要素の中に長文がずらずら書かれてると、その長文が折り返さなかった場合の横幅（これが本来取るべき横幅）がmin-widthに設定されてるのと同じ動きになる
2. inputのようなブラウザが最小横幅を勝手に決めてる？ようなものだとその最小横幅（これが本来取るべき横幅）がmin-widthに設定されてるのと同じ動きになる

私の場合は②でつまづいたんですが、普通にinput要素に「width:60%」とかを設定しても画面の横幅をちっさくしていくと普通にはみ出ちゃうんですよね。全然60%じゃないじゃん、と。

それもそのはずでこの時のinput要素は、

とmin-widthが知らない間に追加されてる感じだったわけです。んでこのautoの値が0ならこっちの期待通りで「ぼく、どこまででも縮むよー」で問題ないんですが、flexの場合はそうじゃないので「ん？これ以上はおれっち縮まれねーよ？だってmin-width:autoが効いちゃってるし。さ・ら・にflexの子要素だもんオレ。だからブラウザ様が決めてたり長文だったりしたらそれがmin-widthの値に設定されてるからそれ以上はちぢまれねーんだ」になっちゃうわけ。

だからスマホで見たときとか、横幅が小さくなっちゃうとflexの親要素で指定してたwidthを突き破って子要素がはみでちゃう。

てコトで

てコトでこっちで明示的に「いいや、よくお聞き、お前のmin-widthはゼロなの！」とflexの子要素に対して教えてあげることではみ出るのが解消するってワケ。

ちなみに長文の場合の話

上の方で出した例の①の場合、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時の動きを独特にしなくちゃいけない理由があるのだと思いますが、、わかりづらいんでバグとしてどこかで直してもらいたいものですよね。