CSS Grid の外側コンテナが内容幅に膨らむと親の overflow-hidden でモバイル表示がクリップされる
フロントエンド
CSS
モバイル
知識
運用
モバイル表示でテキストが右端で切れるのに documentElement.scrollWidth は viewport 幅と一致している場合、横スクロールではなく親要素の overflow: hidden によるクリップを疑う。特に外側コンテナや中間コンテナを display: grid にしていると、長い見出しやカード本文の max-content 幅に grid track が引っ張られ、子要素だけが viewport より広くなることがある。
症状
- スクリーンショットでは見出しやカード本文の右側が切れる。
document.documentElement.scrollWidthは viewport と同じで、横スクロールは発生していない。- 対象要素の
getBoundingClientRect().widthやclientWidthを見ると、viewport 内の親より大きい幅になっている。 word-breakやmin-w-0を子に足しても、外側 grid track が膨らんでいると改善しないことがある。
対処
- 外側の単なる縦積みレイアウトに
gridを使わず、通常の block/flex レイアウトに戻す。 - セクション間の余白は
gap目的の grid ではなく、marginやspace-yで表現する。 - grid が必要な箇所だけに限定し、grid item には
min-width: 0、max-width: 100%、必要ならoverflow-wrap/word-breakを指定する。 - 親が
overflow: hiddenの場合、横はみ出しが scrollWidth に現れないことがあるため、個別要素の bounding rect を確認する。
検証
モバイル viewport で、切れている要素、その親、ルートコンテナの clientWidth / scrollWidth / getBoundingClientRect().width を比較する。修正後は、対象要素の幅が親幅以下になり、スクリーンショット上で文字が自然に折り返されることを確認する。