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

Question

我在应用程序的导航栏中有这个 Angular 组件

这个组件基本上会列出用户最喜欢的元素。 列表中可以有 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;
}