Responsive Flex Layout Chrome Bug

[JaimeStill]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When moving from row to column layout, controls should stack appropriately

What is the current behavior?

In Chrome, when transitioning from row to column layout with an element that has a nested column layout, all of the elements merge onto the same line.

Examples

Chrome at gt-md

Chrome at lt-lg

Firefox at lt-lg

What are the steps to reproduce?

Repro
All of the relevant markup is in test.component.html

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

Tested with the following:
Angular 4.4.4
Material 2 beta 12
flex-layout 2 beta 10

Is there anything else we should know?

While the following causes the mess in Chrome, but works in Firefox and Edge:

<div fxFlex fxLayout="column" fxLayoutAlign="start stretch">

The following causes the intended behavior to work in all browsers:

<div fxLayout="column" fxLayoutAlign="start stretch" [ngStyle.gt-md]="{'flex': '1 1 auto'}">

[largeDachshund]

@JaimeStill , I tried to run your repro on edge and the editor can't render your app! The StackBlitz editor works fine on Chrome, but I think that defeats the purpose of your question. Have you been successful with flex-layout on Edge? I'm getting weird layouts, like super thin columns in Edge.

[JaimeStill]

@largeDachshund , In Edge, opening the repro in full screen preview appropriately shows the app. However, opening the repro from the link above generates the following error for me when instantiating:

Fatal error:
Access is denied.

Evaluating https://unpkg.com/core-js@2.4.1/modules/_export.js
Evaluating https://unpkg.com/core-js@2.4.1/modules/es6.reflect.apply.js
Evaluating https://unpkg.com/core-js@2.4.1/es6/reflect.js
Evaluating polyfills.ts
Evaluating main.ts
Loading blitzapp

[largeDachshund]

@JaimeStill , thanks for the clarification.

[ThomasBurleson]

We have a PR pending that should fix the use of flex-basis used with the fxFlex API.

[CaerusKaru]

The fix without using the ngStyle is the following:

<div fxFlex="auto" fxLayout="column" fxLayoutAlign="start stretch">

We'll look into changing the default behavior, but for now this is the prescribed solution.

[angular-automatic-lock-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.}