Flex-layout: fxFill no longer working as expected

[jkang027]

Bug, feature request, or proposal:

Change to fxFlex (changed from 1e-09px to auto) breaks functionality of fxFill in 5.0.0-beta.14 release.

What is the expected behavior?

Element using fxFill to fill height and width to the parent element.
Expected behavior using 5.0.0-beta.13 (StackBlitz)

What is the current behavior?

Element does not fill remaining space of parent element, and when the content exceeds the available height, the child grows further than the max.
Current behavior using 5.0.0-beta.14 (StackBlitz)

What are the steps to reproduce?

Please see StackOverflow question

What is the use-case or motivation for changing an existing behavior?

fxFill no longer works as expected due to change to fxFlex

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

5.0.0-beta.14

[CaerusKaru]

For the record, the fxFill is not the issue at all. If you remove them from your template (the first one shouldn't be necessary regardless), you'll see that it's solely the flex property that is causing a bad layout.

I'm looking into this. Ideally we wouldn't revert back to the 1e-9px hack because it leads to issues of its own (we didn't change it without reason), but this is probably more critical than those issues.

[CaerusKaru]

@jkang027 Ok in this case it looks like you just need to shuffle some stuff around, and add ADD_FLEX_STYLES to your app.module. I've linked the modified StackBlitz here

[tmburnell]

@CaerusKaru can you explain what the following code is doing?

  providers: [{provide: ADD_FLEX_STYLES, useValue: true}],

[CaerusKaru]

It's telling the fxFlex directive that if there is no flex-direction set on its immediate parent, the directive should add them.

[jkang027]

@CaerusKaru Correct me if I'm wrong and just not getting it, but this only solves half of the issue. It prevents the child component from growing larger than its parent, but it doesn't fill to the height of the parent, assuming the child is smaller, as fxFill should, which is why I was using fxFill on the child component.

See updated Expected Behavior StackBlitz

VS updated New Behavior StackBlitz w/ ADD_FLEX_STYLES

And replacing fxFlex with fxFill in the updated new behavior example still does not properly fill the remaining height and will still grow beyond the height of the parent if the content of the child is larger than the parent.

[jkang027]

@CaerusKaru Can we reopen this issue? The underlying issue with FxFill not adjusting its height/width because of the change to the flex property hasn't been solved with the proposed solution.

[dzonatan]

I'm having similar problem.
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 is going to be resolved as part of #739 after realizing that this can't be patched for components that also use router-outlet (thanks @dzonatan). It will be patched/reverted some time next week.

[CaerusKaru]

In the meantime, the workaround is to explicitly define fxFlex as fxFlex="0px"

[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._}