Soll der Bildcontainer seine Höhe basierend auf dem Inhalt des Geschwistercontainers anpassen? ⇐ CSS

[Guest]

Ich möchte, dass der .content-container je nach Inhalt so viel Höhe einnimmt, wie nötig, und ich möchte, dass der .image-container seine Höhe dynamisch an den .content-container anpasst.
Das Problem, mit dem ich konfrontiert bin, besteht darin, dass, wenn ich dem .image-Container ein Bild hinzufüge, die Höhe des .main-Containers zunimmt und der .content-Container am Ende gedehnt wird, um mit dem übereinzustimmen stattdessen die Höhe des Bildes. Ich benötige das umgekehrte Verhalten: Die Höhe des Bildes sollte sich an die Höhe des .content-Containers anpassen.
Wie kann ich dafür sorgen, dass die Höhe des Bildcontainers DYNAMISCH an die Höhe des Inhaltscontainers angepasst wird? Für jede Hilfe wäre ich dankbar!

Code: Select all

[img]https://images.unsplash.com/photo-1464146072230-91cabc968266?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D[/img]

test1
test1
test1
test1
test1
test1
test1
test1
test1

Code: Select all

.main-container {
width: 100%;
background-color: red;
display: flex;
flex-wrap: wrap;
}

.image-container {
flex: 0 0 50%;
background-color: aqua;
}

.image-container img {
height: 100%;
width: 100%;
}

.content-container {
flex: 0 0 50%;
background-color: orange;
}