Wie kann man eine schlanke Kinderkomponente in die volle Höhe der Seite belegen? ⇐ CSS

[Anonymous]

Ich versuche, ein einfaches Front-End mit Svelte zu erstellen, wo ich eine Hauptseite mit verschiedenen möglichen Kinderkomponenten habe. Mein Problem ist, dass ich die untergeordnete Komponente nicht dazu bringen kann, die volle Höhe der Seite zu übernehmen. < /P>
Hier ist eine vereinfachte Version meines Code
import Child from './Prueba2.svelte';



.prueba {
flex: 1;
background-color: grey;
height: 100%;
}

footer {
background-color: red;
color: white;
text-align: center;
padding: 10px 0;
font-size: 0.9em;
}

.prueba_container {
display: flex;
flex-direction: column;
min-height: 100vh;
}

.child {
background-color: purple;
height: 100%;
}






Footer


< /code>
Prueba2.Svelte:

.prueba_child {
flex: 1;
background-color: orange;
height: 100%;
}


This should occupy the whole screen

< /code>
Ich habe versucht, Flex festzulegen: 1 und Höhe: 100%, aber es scheint nicht wie erwartet zu funktionieren. Die DIV von Prueba_Child soll die Vollbildhöhe in Anspruch nehmen, aber es tut es nicht. Was mache ich falsch und wie kann ich die Kinderkomponente dazu bringen, die volle Höhe zu belegen?