Antwort an „Rolf B“ verfassen

Hallo Matthias,

Alternativ könnte man eben überlegen, wie eine Card aussehen soll, die in unser Schema passt.

Das können wir tun, aber damit behandeln wir das Symptom, nicht die Ursache.

Das Grundproblem bleibt: wie bringe ich es zu Stande, dass das .card-inhalt div den Teil unter dem Titel vollständig ausfüllt und dabei die Eigenschaften des gefloateten Logos erhalten bleiben.

Wenn ich keinen Titel habe (bzw. dieser mit position:absolute aus dem Flow ist), dann kann ich den .card-inhalt auf 100% bringen. Das tue ich bereits (im Wiki mache ich es ohne Nesting):

.cards-list .card:has(.vollbild)
  {
  .card-titel {
    position: absolute;
    width: 100cqw;
  }
  .card-inhalt {
    display: flex;
    flex-flow: column;
    justify-content: end;
    height: 100%;
  }
}

Aber das klappt aus den genannten Gründen nicht, wenn .card-titel und .card-inhalt beide im Flow sind. Bisher kam kein Vorschlag, das könnte bedeuten, dass es tatsächlich nicht geht. @Gunnar Bittersmann - hast Du schonmal drei Hirnzellen daran verwenden können?

Eine Lösung, die ich vermeiden will, besteht in einer statischen Zauberei mit einer festen Höhe für den Titel und einem calc(100% - var(--titel-höhe)) für den Inhalt. Oder wenn, dann nur mit einem Resize-Observer auf dem Titel, der die Titelhöhe ermittelt.

Ich werde mal eine Frage auf Stack Overflow stellen.

Rolf

--
sumpsi - posui - obstruxi
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen