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