I am working on an app that has an expandable side bar which, when expanded, shrinks the content container and vice versa when the side bar is closed. I am using media queries to establish my breakpoints, but since media queries are based off of the viewport and not containers, the queries fire too late when the side bar is expanded (The content container is significantly smaller than the viewport when the sidebar is expanded).

Apparently there is a proposed container media query for future spec, but as it does not exist currently, I wanted to ask if there was a way to get around this issue. I'm sure I could use JavaScript to discover the container width and activate css based on that, but I am hopping to avoid that solution as I would have to add that to many components and it seems heavy handed.

Is there a way to base media queries off of container width rather than viewport width?