CSS Media Query based on element width

Having a modal DIV containing responsive tabs that change from horizontal to vertical on min-width (720px) for example.

This div is Resizable by the user!

So the problem is if the user resizes the div to 600px no responsive change occurs, that's because the screen width didn't change.

My question is: is there any hack or way to make a USER RESIZABLE DIV respond to its width change instead of the screen width? I tried to figure out how to do it with calc, but I think it would be something like :

calc(100% - div-width)= ... etc.   

but I don't think it's supported this way by CSS.

Thanks a lot.

https://stackoverflow.com/questions/65875678/css-media-query-based-on-element-width January 25, 2021 at 04:36AM