Can't use display:none

[flivni]

I want to conditionally display a div based on its width.

I'd like to do something like this:

.mydiv[min-width~="300px"] {
    display: none;
}

But it doesn't work.

I thought at first this was a duplicate of #46. But, it looks like #46 has been fixed. And perhaps my situation is a bit different.

Demonstration in this fiddle.

[marcj]

That's not logically resolvable. If you hide an element (like in you did) the element loses its dimensions and will never receive an resize event anymore. Without dimensions it's impossible to detect whether the element got bigger or smaller to check if a rule matches. So, what you should do is to put the rule on a parent that is always visible. https://jsfiddle.net/21ekLn5y/2/

[flivni]

Thanks. Your workaround and explanation makes sense. I think my scenario might be a common case -- perhaps it should be documented?