fxFlexFill not working on versions 5.0.0-beta.14 and 6.0.0-beta.15

I recently upgraded to angular v6 and then updated to Flex Layout 6.0.0 beta 15 and child layouts with fxFlexFill are not expanding to fill the parent width and height. I then downgraded to v5.0.0-beta.14 and had the same problem, I had to downgrade to 5.0.0-beta.13 to get it working again.

This is my html layout file:

<div class="app-container" fxFlex="100" fxLayout="column">
  <div fxFlexFill fxLayout="row">
    <mat-sidenav-container fxLayout="row" fxFlex="100">
      <mat-sidenav #mainSidebar class="sidebar mat-elevation-z1" fxFlex="300px" [mode]="mode" [opened]="sideNavOpened">
        <app-side-nav-bar (closeSidnav)="closeSidenav()"></app-side-nav-bar>
      </mat-sidenav>
      <mat-sidenav-content fxLayout="column" fxFlex="100">
        <div fxFlexFill fxLayout="column" fxFlex="100">
          <app-nav-bar [sideNavtoOpen]="mainSidebar"></app-nav-bar>
          <div fxFlexFill fxLayout="column" fxFlex="100" class="p-2">
            <router-outlet></router-outlet>
          </div>
        </div>
      </mat-sidenav-content>
    </mat-sidenav-container>
  </div>
</div>

The app-container class is set to min-height: 100vh to allow the child layouts to expand fill both the height and width.

[CaerusKaru]

This will be resolved in the next beta release (in both 5.x and 6.x) some time early next week. The only decision that needs to be made is whether or not to fully revert back to the 1e-09px hack for fxFlex, or to add it as configuration. Please note this only happens in column mode, although that’s generally when fxFill is used, so I understand the importance of this.

[CaerusKaru]

The workaround in the meantime is to explicitly set fxFlex to 0px on the div that wraps the subheader (in the StackBlitz example provided).