如何让Svelte子组件占据页面的整个高度？

Question

我正在尝试使用 Svelte 构建一个简单的前端，其中我有一个包含不同可能子组件的主页。我的问题是我无法让子组件占据页面的整个高度。

这是我的代码的简化版本：

<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>

我尝试设置 flex: 1 和 height: 100%，但它似乎没有按预期工作。 prueba_child div 应该占据全屏高度，但事实并非如此。我做错了什么，如何让子组件占据整个高度？

Answer 1

外容器

.prueba_container

没有设置

height

，导致后代的

height: 100%

无法正常应用。除了

height

之外，设置任何

min-height

，甚至

height: 0

，应该会有帮助。

flex

方法不起作用，因为父级不是弹性容器。将

display: flex; flex-direction: column;

添加到

.prueba

也应该可以解决该问题。