Css 子组件不占用100%的空间（角度材质选项卡）

我需要角形标签的子组件占据100%的给定空间（侧面有20%的空白部分。我能够使其工作，请参阅此stackblitz：

层次结构如下：

AppComponent
    ----> TabComponent (inside AppComponent)
            ----> ComponentA (inside TabComponent)

为了实现这一点，我将

index.html的
body
的高度设置为
100vh
（请参见
styles.css
）

我不明白的是，为什么
tab.component.css
和
component-a.component.css
也需要设置100%的高度？（如果从其中一个中删除，它将停止占用整个空间）

使用
host:
和
display:grid
一起使用
host:
的关键不就是子组件将自动获取100%的给定值吗？我做错什么了吗？
CSS网格布局通过使用
display:grid
调整元素的所有直接子元素的大小来工作。子元素的大小不会调整。因此您的
将只调整其单个直接子对象的大小
，而您的
将只调整其单个直接子对象的大小
。这些是您应用网格布局的唯一位置。正如您所发现的，这无法实现您想要的，因此您不得不求助于其他方法