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

[mainawycliffe]

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-containerclass is set to min-height: 100vh to allow the child layouts to expand fill both the height and width.

[dzonatan]

Indeed they do not work for me too.
Same code different versions:
5.0.0-beta.13 https://stackblitz.com/edit/fxfill-test-ppeare
5.0.0-beta.14 https://stackblitz.com/edit/fxfill-test-qwfjmn

[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).

[mainawycliffe]

Excellent.

[christophechevalier]

Same issue for me. Any news ?

[dzonatan]

@christophechevalier workaround with fxFlex="0px" works pretty well at the moment.

[christophechevalier]

@dzonatan Yeah, I've see, thanks ! But I prefer waiting the bug fix.

[kevincaradant]

@CaerusKaru
Hi any idea when the next release will be here ?
The last was in April :)

[mainawycliffe]

Also, setting the width to 100% not only 0px works too

<div fxFlex="100%" class="body">
<sub-header></sub-header>
</div>

https://stackblitz.com/edit/fxfill-test-fdfsk5?file=app/app.component.html

[CaerusKaru]

Fixed by 5.0.0-beta.15 and 6.0.0-beta.16 releases on NPM as of today

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}