Material: .flex-100 overrides .flex-gt-sm-none instead of acting as the default/fallback

[bsandrow]

<div layout layout-align="center center">
  <div flex="100" flex-gt-sm="none"></div>
</div>

should behave the same as:

<div layout layout-align="center center">
  <div flex-xs="100" flex-sm="100" flex-gt-sm="none"></div>
</div>

but instead behaves as:

<div layout layout-align="center center">
  <div flex="100"></div>
</div>

This is because the .flex-100 rule:

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

is more specific than the .flex-gt-sm-none rule (despite the fact that they are ordered correctly within the file):

@media (min-width: 960px)
.flex-gt-sm-none {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    box-sizing: border-box;
}

I've created a CodePen that demonstrates the issue.

I would submit a PR for this, but I'm not entirely sure what the best way to remedy this would be. Seeing as this is a library, it would be poor form to start throwing around !important. Should it look more like this?

@media (min-width: 960px)
.layout-row > .flex-gt-sm-none, .layout-column > .flex-gt-sm-none {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    box-sizing: border-box;
}

Note: This seems (possibly) related to issues #6362 and #5772.

[johnSowingo]

+1

[topherfangio]

@ThomasBurleson Can you take a quick look at this layout issue and provide feedback/assign to someone if needed?

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[johnSowingo]

Why close an issue just because it is not your current focus? If an issue exists, with a well documented report, shouldn't it remain open?