layoutで中に長いテキストなどを含む幅可変要素のレイアウト久しぶりにcssレイアウトでハマってしまった。layoutはまだまだ思いもよらない挙動をすることがありますね。layoutで中に長いテキストなどを含む幅可変要素のレイアウト」という一言にするとよくわからない感じですが...要は2カラムレイアウトで、片方は固定幅、もう片方は可変幅の(幅いっぱいになるような)カラムレイアウトであり、可変幅の方の子要素として長いテキストを含んでいるもののレイアウトです。単純に考えて↓こんな感じで書けば、1つ目の要素が幅100pxの固定になり2つ目の要素が残りをエリアの幅になると思うのですが、そうはなりません...。.flexクラスの要素の幅を大きくはみ出して表示されてしまいます。layoutでこんな感じに表示が壊れると思っていなかったので困惑...。overflow:autoを加えるという方法です。この方法で解決はできるんですが、item2の要素の中にツールチップなどのabsolute要素を含んでいてそれがboxをはみ出す位置にあると切れて表示されてしまうという問題が生じてしまいます。0を加えるという方法です。itemの場合はデフォルトの値がautoになるんですね...。合理的な既定値を提供します。MDNなんかよくわからないですが、いい感じに計算してくれるっていうことなんですかね。今回の場合はいい感じにしてくれませんが。0に改めて指定しなおせば希望通りのレイアウトになるようです。layoutにこだわる必要が無いなら、floatレイアウトにしてしまうのが一番ラクで早いです。floatレイアウトにしちゃうのがいいんでしょか。兎にも角にも解決しましたし、いろいろと勉強になりました。Blog|ブログを報告する。