モバイル表示でテキストが右端で切れるのに 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 を比較する。修正後は、対象要素の幅が親幅以下になり、スクリーンショット上で文字が自然に折り返されることを確認する。