Как увеличить высоту списка по мере его роста?

Question

У меня есть этот угловой компонент в nav-bar из приложения

Этот компонент в основном будет перечислять элементы, предпочитаемые пользователем. У нас может быть 1, 2 или 10 наименований в списке.

Я хотел бы сделать что-то в CSS, чтобы изменить высоту этого компонента в зависимости от длины списка избранных. Как я могу сделать это, чтобы увеличить высоту моего компонента на основе длины списка

Мой код:

.favorite-notification-panel {
  height: calc(43vh - 100px);
  width: 900px !important;
  overflow: hidden;
  right: -176% !important;
  top: 38px;
}

<!-- FAVORITE ITEMS-->
<ul id="favorite_panel" [@mobileHeaderNavRight]="navRight" class="nav-right profile-menu-aling notification-bell">
  <li class="user-profile header-notification favorite-pointer" (clickOutside)="favoritePanelOutsideClick($event)" [ngClass]="favoriteDevicesNotificationClass">
    <a href="javascript:" (click)="toggleFavoriteNotification()">
      <img _ngcontent-c2="" class="fav-icon-align" src="assets/images/widget/ic_star_menu.png" />
    </a>

    <!-- component from favorite items -->
    <app-favorite-devices class="profile-notification favorite-notification-panel" [@notificationBottom]="favoriteDevicesNotification" [ItemsFavorited]="itemFavorited">
    </app-favorite-devices>
  </li>
</ul>

Answer 1

    .favorite-notification-panel {
   height:fit-content;
   min-height: calc(43vh - 100px);
   width: 900px !important;
   overflow:hidden;
   right: -176% !important;
   top: 38px;
}