Ich habe eine 3-Elemente-Flexbox. Eines seiner Elemente enthält einen Iframe. Ich möchte, dass die Höhe der Flexbox (Länge quer zur Achse) durch die Höhe der Iframe-Quelle bestimmt wird. Stattdessen wird die Höhe der Flexbox auf die maximale Höhe der anderen beiden Elemente eingestellt.
Hier ist eine Annäherung an meinen HTML-Code:
Hier ist eine Abkürzung des CSS. Die Elemente 1 und 3 sind ebenfalls Flexboxen.
Code: Select all
.elements {
display: flex;
flex-direction: row;
align-items: stretch;
}
.element-1 {
width: min-content;
flex: 0 0 auto;
}
.element-2 {
flex: 1 0 auto:
display: grid;
grid-template-rows: 1.1em 1fr;
}
.element-2 > iframe {
width: 100%;
align-self: stretch;
}
.element-3 {
flex: 0 0 auto;
}
Ich weiß, dass ich die Höhe des Iframes explizit auf einen absoluten Wert festlegen kann, aber in der Praxis werde ich den Inhalt des Iframes dynamisch ändern. Ich möchte, dass mein Browser die Quelle des Iframes liest, eine angemessene natürliche Höhe dafür ermittelt und diese bei der Berechnung der Höhe der Flexbox verwendet. Stattdessen wird der Inhalt in einem Scrollfenster angezeigt.
(Außerdem befindet sich das eingebettete Dokument nicht unbedingt auf demselben Host wie mein Dokument, daher kann ich es nicht immer mit JavaScript abfragen Abmessungen des eingebetteten Dokuments.)
Mobile version