html - CSS Media Query based on element width

Question

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.

question from:https://stackoverflow.com/questions/65875678/css-media-query-based-on-element-width

Answer 1

In order to achieve the result you're looking for as you said in the comments above, i think one great way is to use css grid or flex. You can make your div responsive with one of them without the need of a media query. Example: display: flex; flex-wrap: wrap;.