This is a CSS-only problem, no JavaScript allowed.

I have a DIV that when it reaches a certain width, it should disappear. @media (max-width: 1024px) {} works for the normal cases as the browser resizes.

BUT…..

There are screens that have a pop-open side panels that will squeeze the DIV into the left-half of the screen. In this situation, I’d like the DIV to also disappear just like the @media condition above. When the panel closes, the DIV should reappear normally.

I’ve tried DIV within a DIV, different display property types in combo with overflow, flex, and, of course, various @media settings.