Meine Flexbox innerhalb einer absoluten Box befindet sich innerhalb eines definierten Höhendivs (JSFiddle). Wenn ich mit der Maus über den Block fahre, erscheint der Text von unten, wird aber nicht vollständig angezeigt. Div main für den Hover-Teil ist 600 x 250 Pixel mit Überlauf: versteckt und darin werden Titel und Text nacheinander aufgeteilt (regelmäßiger Fluss).
kann manchmal zwei Zeilen beanspruchen, daher ist seine Höhe auf automatisch eingestellt.
ist auf 100 % Höhe eingestellt, relativ positioniert und auf display: flex eingestellt. Darin befindet sich div intro, absolut positioniert mit top: 100% (das beim
Bewegen der Maus auf 0 wechselt) und align-self: flex-end, um es am unteren Rand von main zu halten, um Text aus dem Titel zu behalten:
Code: Select all
I'm a title!
Just a bunch of long paragraphs of text
ist auf 100 % eingestellt, aber ich habe erwartet, dass die Höhe der Höhe von main minus title entspricht. Es ist nur die Höhe von main, die den Textblock zum Überlaufen bringt, und wenn ich mit der Maus über den Block fahre, damit der Text erscheint, wird der untere Rand außerhalb von main blockiert und der Text abgeschnitten.
Wie kann ich dafür sorgen, dass Text die erwartete Höhe hat, da ich die Höhe des Titels nicht vorhersagen kann (ich kann calc() meines Wissens nicht verwenden) und ohne JavaScript?
Mobile version