Prefixing causes flexbox to be set outside media query

[jakobdamjensen]

The following gives incorrect output:

.footer__navigation {
  border-bottom: 1px solid $brown;
  overflow: hidden;
  padding: 30px 0;

  +above($m) {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    max-width: $m;
  }
}

Output =

.footer__navigation {
  border-bottom: 1px solid #9b8c89;
  overflow: hidden;
  padding: 30px 0;
  display: -webkit-box;
  display: -webkit-flex;
}
@media screen and (min-width: 600px) {
  .footer__navigation {
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 600px;
  }
}

Notice how

display: -webkit-box;
display: -webkit-flex;

Is set on .footer__navigation.

This is done with the latest version on npm (nib@1.0.4)

[chuckharmston]

I'm experiencing this problem as well.

[arecvlohe]

same here

[jamesplease]

Yikes...1.5 years and this is still an issue... @slang800, are you available to review a PR if I try to figure this out?

---

For future visitors, if your browser support is pretty decent you should try out https://github.com/tj/nib/issues/312#issuecomment-132997055