rule within media query not overriding other rule

[jmlee2k]

First of all, thanks a TON for this! It definitely spared me at least a couple grey hairs.

Not sure if this is a bug or not, but I thought I would mention it here in case anyone runs into it. If you have a standard rule, something like:

.sidebar
{
    flex-basis: 80vmax;
}

and a rule within a media query which overrides it:

@media all and (orientation:portrait)
{
    .sidebar
    {
        flex-basis: auto;
    }
}

the "auto" won't take effect when the media query is active. In this case, the easy workaround is to just specify both flex-basis values in their own media queries as follows:

@media all and (orientation:landscape)
{
    .sidebar
    {
        flex-basis: 80vmax;
    }
}

@media all and (orientation:portrait)
{
    .sidebar
    {
        flex-basis: auto;
    }
}

Again, thanks a lot to everyone that's worked on this, and I hope this helps out!

[rodneyrehm]

The problem is that you're overwriting a vp-unit with something that is not a vp-unit. what's not a vp-unit is ignored by the buggyfill, so you never get the override. Making your CSS conditional removes the need to overwrite it, so it's not a problem to begin with.

This looks like a duplicate of #13

[jmlee2k]

Yeah, I didn't really think it was a problem, I just wanted to mention it in case anyone ran into it.

Thanks!