如何随着列表的增长扩展列表的高度？

Question

我在应用程序的导航栏中有这个角度分量

该组件基本上将列出用户喜欢的项目。 我们可以在列表上有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;
}