I'm trying to build a simple front-end with Svelte, where I have a main page with different possible child components. My problem is that I can't get the child component to take up the full height of the page.
Here is a simplified version of my code:
<script> import Child from './Prueba2.svelte';</script><style> .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%; }</style><div class="prueba_container"><div class="prueba"><Child/></div><footer><p>Footer</p></footer></div>Prueba2.svelte:
<style> .prueba_child { flex: 1; background-color: orange; height: 100%; }</style><div class="prueba_child"> This should occupy the whole screen</div>I tried setting flex: 1 and height: 100%, but it doesn't seem to work as expected. The prueba_child div is supposed to take up the full screen height, but it doesn't. What am I doing wrong, and how can I make the child component occupy the full height?