flex-containerの幅指定は、各flex-boxの内部要素(見出しを除く)の幅を用いて計算されているようです。しかし各内部要素の幅に対して、各見出しの幅が指定を突き抜けます。すると各内部要素の幅で整形されたflex-container内側の幅が、見出し幅の突抜け分だけ長くなり、結果として直前に整形された幅よりも長くなり、意図しない横スクロールが発生します。
利用者でどうにかできる感じではなさそうなので相談というよりは報告なのですが…
再現です→https://wikiwiki.jp/sandbox/Flexbox幅
また同様の理由により、横に並んだflex-boxにおいて見出しの枠が接触するという、デザイン上の難点もあります。
WIKIWIKIユーザー助け合い掲示板
Flexboxと幅指定について。Flexboxの内部に見出しを配置すると、意図しない横スクロールが発生する。
2
コメント
views
6
フォロー
通報 ...
もっと精緻な分析をされている方がおられました。
https://zawazawa.jp/genshinwiki/topic/42/502
ただいま確認したところ、PC表示においてflex-box内部のh2が、(モバイル表示と同様に?)内部要素から突き抜けずはみ出さずになるように修正されていました。対応・改修ありがとうございました！