Layout with fxFlex="auto" not restoring max-height values properly

[TylerDev6]

on page load scans breakpoint overlaps too aggressively [and matches the smallest instead of the largest matching].

<div fxFlex="auto" fxFlex.gt-xs="33%" fxFlex.gt-sm="50%"></div>

I'm using fxFlex with 3 breakpoints and IE seems to only pick the first one it passes:

on page load, in spite of gt-sm qualifying, it defaults to the gt-xs value. However if I manually re-size the browser it will correct itself. This happens in IE11 only.

[ThomasBurleson]

Need a plunked plz

[TylerDev6]

Do you have an existing plunkr I can start from?

[ThomasBurleson]

@TylerDev6 - please update with Beta.4 (from npm) and see if the problem persists.

[ThomasBurleson]

@TylerDev6 - Try this Starter Plunkr: https://plnkr.co/edit/h8hzyoEyqdCXmTBA7DfK?p=preview

[TylerDev6]

https://plnkr.co/edit/o6zKj8?p=preview

Thanks for the help. Here's a plunk showing the problem.... I noticed a few things:

1. It is also reproducible in Chrome / Firefox.
2. It didn't start happening until I added fxLayoutGap properties.

Essentially, on initial page load the widths are being set to 33-33-33, instead of 50-23.4-23.4. Manually resizing the window will correct it.

[TylerDev6]

I am also noticing now that going from a % based fxFlex to fxFlex="auto" does not remove the % restriction.

[ThomasBurleson]

If you are using the code from HEAD, you should see this:

https://github.com/angular/flex-layout/blob/master/src/lib/flexbox/api/flex.ts#L264

which means the applied inline style should be flex: 1 1 auto. If not, please file a separate issue.

[TylerDev6]

so I should check out @latest? I'm running beta.4 at the moment

[TylerDev6]

and what's going is as follows:

fxFlex.gt-sm=33% will apply a max-width: 33% in addition to the flex 1 1 100% style.....
fxFlex="auto" will switch to flex 1 1 auto, but the max-width: 33% remains.

[ThomasBurleson]

@TylerDev6 - please file distinct issues separately.

[ThomasBurleson]

This is working well with the latest code in master: Plunkr Demo

-XS-

-SM-

-MD-