今更のIE – flex

CSSIE

今はもうIEへの完全対応などしませんが、原因が分からない乱れはやはり気になります。

デモサイトの一つで、メインのナビゲーションとタグリストがサイト幅をはみ出て横スクロールバーが出てる。なんだこれ?flexのバグには対処したのに、、、

言われなければ気が付かないかもしれない程度の乱れだし、ワードプレスも「Twenty Twenty-One」テーマで完全にIEは切ったみたいだし、放置でもいいんだけど、、、

タグリスト

現在このサイトのボトムに出しているようなタグリストが、サイト幅で折り返してくれなかった。

はみ出しているラッパーを、

  • display: inline-flex
  • overflow: hidden

として、どうやら解決した模様。

 

  • display: flex
  • overflow: hidden

とすると、はみ出た分が想像通り切れちゃう。

 

別のデモサイトでは、まったく同じテーマでもきれいに折り返していたので、まだ疑念は残る。

ナビゲーション

こっちもはみ出していた。同じテーマでもはみ出たり、はみ出なかったり。

サブメニューが原因でした。

  • ホバーでvisiblity: hidden ⇒ visible、visiblity: 0 ⇒ 1)
  • ポジションはabsolute
  • transformでサイト幅に収まるよう位置調整

※左端、右端のメニューにサブメニューが設定されている

結局、transformなしの状態でブロック幅に収まるようにし、transformでいい感じの位置に来るようにしたところ、きっちり収まってくれました。

ぱっと見、ボックス内に収まって見えるのでなかなか気づかなかった。

また、サブメニュー内に長めのアンカーが入っていないと状況自体が発生しないので、これまた見過ごしがち。

なんで?

「子要素をposition: absoluteにしたら親要素のサイズには含まれない」って思ってたけど、状況が発生するのがIEだけなので、やっぱりバグか。

対処できた後に改めてググると、あっさり参考記事が見つかることが多いのは私だけだけだろうか、、、

そのほか1
  • 要素が3つ
  • 1番目を左端
  • 2、3番目を右寄せ

にしようとしてjustify-content: flex-endを使うとどうも表示が怪しい。

justify-content: flex-startだときれいに並ぶ。

そのほか2

これはIEあるあるだと思うけど、flexの中にflexを入れるともうパニック。

display: flexじゃなくても済む箇所は出来るだけdisplay: blockにすると、それだけでどうにかなることが多い。こういうケースでだけかもしれないけど。

 

以上、レイアウト制限やHTML変更をせずとも簡単なCSSで回避出来たので追及おしまい。

これ以上の解明・解決が出来てもな~んにも生み出さないし。

連休なのをいいことに、久々に徹夜してしまった。

 

かなりピンポイントですが、同じお悩みの方のほんの一助になれば、と思いつつメモ終了。