Mosaik + Detailzeile mit CSS

[Rolf B]

Hallo x51398,

ich weiß noch nicht, wie man es besser machen kann ohne andere lästige Auswirkungen zu bekommen, aber dein Layout flackert. Mach den Ausgabebereich deines Pen mal so hoch, dass es gerade noch keinen vertikalen Scrollbar gibt und durch den hover einer entstehen würde.

Und nun halte den Mauszeiger mal ganz knapp an den rechten Rand von einer der Boxen.

Was passiert: Durch den Hover erscheint der div, der lässt die Scrollbar erscheinen, das macht den Clientbereich schmaler, das macht die Box schmaler, nun ist die Maus im Zwischenraum, es hovert nicht mehr, der div verschwindet, die Scrollbar verschwindet, der Clientbereich wird breiter, das macht die Box breiter, nun hovert es wieder - goto start; goto Disco;

Problem ist die variable Breite des grid, man muss eine Lösung finden mit der die Breite nicht vom Scrollbar des Containers abhängt. Der naïve Ansatz wäre, dem Body ein overflow-y: scroll; zu geben; der zweite bestände darin, das grid auf eine Breite von calc(100vw - X) zu setzen - das führt aber zu einer mühsamen Rechnerei mit den Paddings und Margins der Eltern-Elemente. Bei mir hat X=50px funktioniert. Alles noch nicht gut.

Rolf