Can media queries resize based on a div element instead of the screen?

Question

I would like to use media queries to resize elements based on the size of a div element they are in. I cannot use the screen size as the div is jus

Answer 1

The only way I can think that you can accomplish what you want purely with css, is to use a fluid container for your widget. If your container's width is a percentage of the screen then you can use media queries to style depending on your container's width, as you will now know for each screen's dimensions what is your container's dimensions. For example, let's say you decide to make your container's 50% of the screen width. Then for a screen width of 1200px you know that your container is 600px

.myContainer {
  width: 50%;
}

/* you know know that your container is 600px 
 * so you style accordingly
*/
@media (max-width: 1200px) { 
  /* your css for 600px container */
}

Answer 2

You can use the ResizeObserver API. It's still in it's early days so it's not supported by all browsers yet (but there several polyfills that can help you with that).

Basically this API allow you to attach an event listener to the resize of a DOM element.

Demo 1 - Demo 2

Answer 3

I've just created a javascript shim to achieve this goal. Take a look if you want, it's a proof-of-concept, but take care: it's a early version and still needs some work.

https://github.com/marcj/css-element-queries

Answer 4

From a layout perspective, it is possible using modern techniques.

Its made up (I believe) by Heydon Pickering. He details the process here: http://www.heydonworks.com/article/the-flexbox-holy-albatross

Chris Coyier picks it up and works through a demo of it here: https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/

To restate the issue, below we see 3 of the same component, each made up of three orange divs labelled a, b and c.

The second two's blocks display vertically, because they are limited on horizontal room, while the top components 3 blocks are laid out horizontally.

It uses the flex-basis CSS property and CSS Variables to create this effect.

.panel{
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #f00;
  $breakpoint: 600px;
  --multiplier: calc( #{$breakpoint} - 100%);
  .element{
    min-width: 33%;
    max-width: 100%;
    flex-grow: 1;
    flex-basis: calc( var(--multiplier) * 999 );
  }
}

Demo

Heydon's article is 1000 words explaining it in detail, and I'd highly recommend reading it.

Answer 5

The question is very vague. As BoltClock says, media queries only know the dimensions of the device. However, you can use media queries in combination with descender selectors to perform adjustments.

.wide_container { width: 50em }

.narrow_container { width: 20em }

.my_element { border: 1px solid }

@media (max-width: 30em) {
    .wide_container .my_element {
        color: blue;
    }

    .narrow_container .my_element {
        color: red;
    }
}

@media (max-width: 50em) {
    .wide_container .my_element {
        color: orange;
    }

    .narrow_container .my_element {
        color: green;
    }
}

The only other solution requires JS.