Material: layout: flex-33 and flex-66 don't work with layout-gt-xs, layout-gt-md, etc.

[Ardeshir81]

Actual Behavior:

• What is the issue? *
  When I apply layout-gt-xs=row to some element, what happens is actually like no layout is applied. I mean the classes are not present.
• What is the expected behavior?
  I think there should be some classes that handle .layout-gt-xs and their children

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
  https://codepen.io/Ardeshir81/pen/GOYXzX
• Details:
  You need to inspect those two divs with ugly background to see no classes are applied.

AngularJS Versions: *

• AngularJS Version:
  1.5.8
  (codePen is 1.6.6) same behaviour
• AngularJS Material Version:
  1.1.5
  (codePen is 1.1.4) same behaviour

Additional Information:

• Browser Type: * Mozilla Firefox developer Edition
• Browser Version: * v58.0b6
• OS: * Windows 10
• Stack Traces:---

[Splaktar]

Your example uses flex="33". This seems to be part of the bug.

I've added an example that uses both 33 and 30 for flex values. The 30 w/o layout="column" works, but the 33 w/o layout="column" doesn't have a width.

For the CSS here, flex="30" gets the following:

.flex-30 {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 100%;
          flex: 1 1 100%;
  max-width: 30%;
  max-height: 100%;
  box-sizing: border-box; }

.layout-row > .flex-30 {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 100%;
          flex: 1 1 100%;
  max-width: 30%;
  max-height: 100%;
  box-sizing: border-box; }

.layout-column > .flex-30 {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 100%;
          flex: 1 1 100%;
  max-width: 100%;
  max-height: 30%;
  box-sizing: border-box; }

Whereas flex="33" only gets this:

.layout-row > .flex-33 {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 33.33%;
          flex: 1 1 33.33%;
  max-width: 33.33%;
  max-height: 100%;
  box-sizing: border-box; }
.layout-column > .flex-33 {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 33.33%;
          flex: 1 1 33.33%;
  max-width: 100%;
  max-height: 33.33%;
  box-sizing: border-box; }

I've got another CodePen that demonstrates this. If you uncomment the .flex-33 styles in the CSS, it works for the 33 case. It also demonstrates that this affects flex-66 and other layouts like layout-gt-md.

[Ardeshir81]

Thanks @Splaktar for your attention . Right ! I misunderstood the problem . Thanks for fixing it : )
BTW, I encountered another problem .
class flex's width is zero on {layout-gt-md|layout-gt-sm}=row
This is the code pen : https://codepen.io/Ardeshir81/pen/vWVPrK

In which as you tweak the code, on less-than-xs (which results in layout=column) it works fine, layout-column also works fine, but layout-gt-xs and layout-gt-sm just sets the blue div's width to zero 0

• I posted it here because I thought they may be related

[Splaktar]

I looked at the Layout tests because I wondered how this got past the tests, unfortunately there are no tests for the styles that combine layouts and flex like .layout-row > .flex-33 at this time.

[Splaktar]

This seems to be related to https://github.com/angular/material/issues/9546. That issue also has a PR: https://github.com/angular/material/pull/10797

[Ardeshir81]

Oops. I also think so , it seems he same. If thats the case, sorry for duplicate issue

[Splaktar]

I looked into this a bit deeper and this is not a duplicate. I'm going to add a fix and some docs to 1.1.10 which should help clarify the issue faced here.