Как сделать компонент Angular таким же, как его содержимое?

Question

Итак, у меня есть компонент Angular, который меняет свою высоту в зависимости от входного аргумента. Как это:

@Component({
    selector: 'x',
    templateUrl: './x.html',
    styleUrls: [ './x.scss' ],
})
export class xComponent implements OnInit {
    @Input() bigVersion: boolean;

    constructor(
    ) {
    }

    ngOnInit() {
    }
}

с чем-то вроде этого в шаблоне:

<div [class.big]="bigVersion">

</div>

и это в стиле:

div {
  height: 120px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;

  &.big {
    max-height: 340px;
    height: 55%;
  }
}

Но компонент всегда отображается с размеры 0x0 и не совпадают со страницей.

Как сделать так, чтобы компонент имел такой же размер, как и его содержимое?

Использование следующего не помогло:

:host {
    display: block; // or inline-block
}