Как заставить дочерний компонент Svelte занимать всю высоту страницы? ⇐ CSS

[Anonymous]

Я пытаюсь создать простой интерфейс с помощью Svelte, где у меня есть главная страница с различными возможными дочерними компонентами. Моя проблема в том, что я не могу заставить дочерний компонент занимать всю высоту страницы.
Вот упрощенная версия моего кода:

Код: Выделить всё

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

Prueba2.svelte:

Код: Выделить всё

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


This should occupy the whole screen

Я попробовал установить flex: 1 и height: 100%, но, похоже, это не работает должным образом. Предполагается, что элемент div prueba_child занимает всю высоту экрана, но это не так. Что я делаю не так и как сделать так, чтобы дочерний компонент занимал всю высоту?

Подробнее здесь: https://stackoverflow.com/questions/791 ... f-the-page