fxLayoutAlign conflicts with fxFlex breakpoint evaluation

[silvioboehme]

Bug Report

<div fxLayout="row" fxFlex.gt-sm="25%" fxFlex.lt-md="100%" fxLayoutAlign="center end" class="sec1">

This div (red) should be 25% for breakpoints greater 960px and 100% for all lower resolutions.
This works fine if you refresh the page at MD breakpoint (first screenshot), but if you increase the size to LG the div (red) gets 100% of the size. This depends on the fxLayoutAlign directive. If you remove this, then everything works fine. But with fxLayoutAlign the breakpoint for fxFlex are not evaluated, if you resize the browser.

What is the expected behavior?

This works fine in 7.0.0-beta19

What is the current behavior?

This breaks in all version greater than 7.0.0-beta20

What are the steps to reproduce?

https://stackblitz.com/edit/angular-flex-layout-seed-dtspn2

Just resize the output window

[taivu]

happening on beta 22 as well.

[silvioboehme]

Yes, all version greater beta 19 are affected

[CaerusKaru]

I don't think we'll be able to get to this issue this week, but we will try and get it fixed by the next release. Thanks for tracking this down!

[CaerusKaru]

So the title of this issue is not exactly accurate. What happens in fxFlex generation is that it adds a max-width/max-height/etc, which ultimately gets overwritten by/overwrites fxLayoutAlign. This question of "who wins" will require further thought.