Angular PrimeNg MegaMenu into a scrollable div with overflow-y result in hidden submenus

Question

I have a very long vertical MegaMenu with PrimeNg, it is the main menu of my app that is located on the left side, it can popout as a normal menu with text or only icons (like gitlab kinda). It has menu submenus that pop our to the right with the property display:block and enough z-index

Menu:

Submenu:

This menu is in a main sidebar <div> that is is position: fixed and I want it to have the property overflow-y: auto with a set height to be scrollable, but when I do that, my submenus are hidden under content:

Hidden submenu:

Here is the full code for the sidebar in global layout:

<div class="layout-wrapper">
  <div class="layout-topbar">
    <app-topbar (tenantChangeEvent)="onReloadSidebar()"></app-topbar>
  </div>
  <div class="layout-sidebar" [ngClass]="{ 'sidebar-in': !sidebarOpen, 'sidebar-out': sidebarOpen }">
    <a
      class="toggle-sidebar-button cursor-pointer"
      (click)="toggleSidebar()"
      [pTooltip]="'open/close sidebar' | translate"
      tooltipPosition="bottom"
      tooltipStyleClass="custom-tooltip"
      [ngClass]="{ 'text-right': !sidebarOpen, 'text-left': sidebarOpen }">
      <i [ngClass]="{ 'fa-arrow-right': !sidebarOpen, 'fa-arrow-left': sidebarOpen }" class="fa"></i>
    </a>
    @if (sidebarOpen) {
      <app-sidebar-out [reloadSidebar]="reloadSidebar"></app-sidebar-out>
    } @else {
      <app-sidebar-in [reloadSidebar]="reloadSidebar"></app-sidebar-in>
    }
  </div>
  <div class="layout-main-container">
    <div class="layout-main">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

The css :

.layout-wrapper {
    min-height: 100vh;
  }

  .layout-main-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
    transition: 0.15s all ease !important;
    padding-left: 55px !important;
    padding-top: 50px;
  }

  .layout-main {
    flex: 1 1 auto;
    padding: 0.75rem;
  }

  .layout-topbar {
    position: fixed;
    height: 50px;
    z-index: 997;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .layout-sidebar {
    position: fixed;
    height: calc(100vh - 50px);
    z-index: 1;
    top: 50px;
    left: 0;
    border-radius: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: $content-color;
    align-items: flex-end;
    width: 200px;
  }

  .sidebar-out ~ .layout-main-container {
    transition: 0.15s all ease !important;
    padding-left: 200px !important;
  }

  .sidebar-in {
    transform: translate(-145px);
    transition: 0.2s all ease;
    // overflow-y: auto;
  }
  
  .sidebar-out {
    transition: 0.2s all ease;
    transform: 0;
    overflow-y: auto;
  }
  
  .toggle-sidebar-button {
    z-index: 1;
    font-size: 1.25rem;
    color: $base-color;
    order: 1;
    width: 100%;
    padding: 1rem 1.4rem;
  }

Thank you in advance for your help

I tried several positions (fixed, absolute, sticky etc) and css properties for the mega menu or the parent divs, I try to put all in block but nothing works... I tried to put appendTo="body" on the mega menu but it changes nothing... And there is nothing mor in the primeng documentation about the menu