I have a large application built in Angular 17 that I’ve recently updated to Angular 18. Since the flex-layout packages do not officially support Angular 18, I overrode them to make npm install work.

However, I’ve encountered an issue: when resizing the pages, some parts of the page become invisible.

Also in code, am using it like this:

 <div class="wrapper" fxFlex="grow" fxLayout="row">
    <fl-sidebar></fl-sidebar>

    <div #scrollContainer class="main-container" fxFlex>
      <router-outlet #o="outlet" (activate)="onActivate()"></router-outlet>
    </div>
  </div>

Given the size of my project, what is the best and easiest way to ensure flex-layout works as expected in Angular 18?