layout: flex-val inside layout-row and layout-column prevents media-dependent auto width

[WebTechnolog]

Bug:

Too specific "flex-val" selectors prevent applying media-dependent "auto" rules.

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue

Detailed Reproduction Steps:

1. Put a flex="100" div inside layout="row"
2. Add flex-gt-sm="auto" to it

What is the expected behavior?

The described div's width should be "100%" on < 960px and "auto" on >= 960px

What is the current behavior?

The rule .layout-row > .flex-100 prevents @media (min-width: 960px) { .flex-gt-sm-auto {...} } from happening

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.6.9
• AngularJS Material: 1.1.10

[bersLucas]

We can fix this by adding the .layout-row > to the not-valued layout rules (grow, auto, ect)

material/src/core/style/layout.scss

Line 117 in 0671aab

.#{$flexName}-grow { flex: 1 1 100%; box-sizing: border-box; }

  .layout-row > .#{$flexName}-grow        { flex: 1 1 100%;  box-sizing: border-box; }
  .layout-row > .#{$flexName}-initial     { flex: 0 1 auto;  box-sizing: border-box; }
  .layout-row > .#{$flexName}-auto        { flex: 1 1 auto;  box-sizing: border-box; }
  .layout-row > .#{$flexName}-none        { flex: 0 0 auto;  box-sizing: border-box; }
  .layout-row > .#{$flexName}-noshrink    { flex: 1 0 auto;  box-sizing: border-box; }
  .layout-row > .#{$flexName}-nogrow { flex: 0 1 auto; box-sizing: border-box; }

  .layout-column > .#{$flexName}-grow        { flex: 1 1 100%;  box-sizing: border-box; }
  .layout-column > .#{$flexName}-initial     { flex: 0 1 auto;  box-sizing: border-box; }
  .layout-column > .#{$flexName}-auto        { flex: 1 1 auto;  box-sizing: border-box; }
  .layout-column > .#{$flexName}-none        { flex: 0 0 auto;  box-sizing: border-box; }
  .layout-column > .#{$flexName}-noshrink    { flex: 1 0 auto;  box-sizing: border-box; }
  .layout-column > .#{$flexName}-nogrow { flex: 0 1 auto; box-sizing: border-box; }
}

Does anybody else have some input on a better way or a reason to not do this before I submit a PR? Specifically, should .flex-gt-sm-auto have priority here over .flex-100?

In the meantime, you can add this to your project to get it working for now

.layout-row > .flex-gt-sm-auto {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    box-sizing: border-box;
}

[Splaktar]

There are some layout changes already in master for 1.1.11, so it's important to test this against those. I've updated the CodePen to use the latest master and this is indeed still an issue.

From the bug report, I thought that maybe the media-dependent styles were being overwritten. However in the debugger, it appears that they aren't even being applied/activated at all.