Der nicht gescrollte Seitentitel war eine einfache Lösung. Dieser Titel kann auf mehrere Zeilen umbrechen, daher diente overflow nur dazu, zu verhindern, dass lange, nicht getrennte Wörter die Breite sprengen. Wenn man overflow entfernt und overflow-wrap: break-word; hinzufügt, werden Wörter bei Platzmangel gebrochen.
Wenn der Titel beim Scrollen an den Header andockt, verwenden wir overflow: hidden zusammen mit text-overflow: ellipsis, um Titel zu kürzen, die länger als eine Zeile sind. Dort lässt sich overflow nicht so einfach entfernen, daher habe ich etwas Padding hinzugefügt und die Ausrichtung durch einen negativen margin nach links verschoben. Das ist nicht die schönste CSS-Lösung, aber sie funktioniert.
Ein wenig mehr Details dazu, warum das passiert. In einer Schriftart gibt es das Konzept der „Em-Box