CSS：绝对定位的div的父级尺寸错误

我正在尝试将图像（实际上是Sprite-sheet）放在CSS网格内。
为了能够对sprite-sheet进行css动画处理，我必须将其位置定义为“绝对”。我设法用一个非常简单的代码复制了我的问题：

首先，我有一个sprite-sheet组件，该组件包含sprite-sheet和compo-image组件，该组件应模拟另一个持有该sprite-sheet的组件

sprite-sheet.component.ts：

import { Component } from '@angular/core';

    @Component({
      selector: 'sprite-sheet',
      styleUrls: ['./sprite-sheet.component.scss'],
      templateUrl: './sprite-sheet.component.html',
    })
    export class SpriteSheetComponent {
      constructor() {
      }
    }

sprite-sheet.component.html

<div></div>

sprite-sheet.component.css

:host {
  height: 100%;
  width: 100%;
}

div
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-repeat: no-repeat !important;
  background-position-x: 0%;
  background-image: url('/assets/icon/favicon.png')
}

图像组件

import { Component } from "@angular/core";

@Component({
    selector: 'compo-image',
    templateUrl: `./component-with-image.html`,
    styleUrls: ['./component-with-image.css']
})
export class ComponentWithImage {
}

component-with-image.html

图像组件

div {
    height: 100%;
    width: 100%;
}

然后，我尝试在我的应用中显示此图像：

component-with-image.html

<div>
  some-text
</div>
<div> <!-- should be a css grid -->
  <compo-image></compo-image>
</div>

app.component.css

div {
    width: 100px;
    height: 100px;
}

compo-image {
    width: 100%;
    height: 100%;
}

但这就是我得到的：

很酷，这是因为我的绝对定位图像是相对于根组件的，因为我没有为其他组件指定位置。

因此，我添加了一个名为sprite-sheet2的包装器组件，以使其具有“相对”位置并托管实际的sprite-sheet组件。

sprite-sheet.component2.ts

import { Component } from '@angular/core';

@Component({
  selector: 'sprite-sheet2',
  styleUrls: ['./sprite-sheet.component2.scss'],
  templateUrl: './sprite-sheet.component2.html',
})
export class SpriteSheetComponent2 {
  constructor() {
  }
}

sprite-sheet.component2.ts

:host {
    position: relative;
    height: 100%;
    width: 100%;
}

sprite-sheet {
    height: 100%;
    width: 100%;
}

sprite-sheet2.component2.html

<sprite-sheet></sprite-sheet>

但是然后我得到这个：

sprite-sheet2上方的所有内容均已定义宽度和高度，但sprite-sheet2及其包含的所有内容均具有0x0大小，即使这些组件的宽度和高度= 100％。

我究竟做错了什么？