Recursion demo

[ausi]

I’m not sure if this repo is also meant for demos illustrating current problems with container queries. If it is, here is one :)

[marcoscaceres]

If this can happen, then something is seriously wrong.

[ausi]

AFAIK the “recursion problem” is a known issue of the currently proposed container queries. I posted an idea in WICG/container-queries#2 (comment) how this could be possibly solved. There are more ideas around for possible solutions, see also http://alistapart.com/article/container-queries-once-more-unto-the-breach#section4.

[pdaoust]

It certainly is an issue of the currently proposed container queries, unless the spec stipulates that a container must have something that makes its size independent of its children (off the top of my head, that's either block display or explicit dimensions) or else it's ignored. That way, the container query could safely be explicit about the container. If it didn't fulfil the requirements, the styles just wouldn't apply.

That said, the more I think of it, the more I like your idea of having the container query be a pseudo-class on a child, and then the browser traverses up the tree until it can find a container whose size is independent of its children.

It's also not terribly hard to determine whether an element's size is influenced by its children. Is it display: block, or does it have an explicit width? If so, then it's uninfluenced by its children. There's some weird edge-case behaviour with inline-block ancestors wrapping block containers though (see http://codepen.io/anon/pen/yNxPWY; the parent, while block-level, is totally influenced by the size of the inline-block grandparent, which in turn is influenced by the size of the content in the floated grandchild -- though not the size of the grandchild itself, which surprised me. And Firefox does something completely different from all the other browsers.)