What about "display: frame" ?

Hi everyone,

I apologize in advance because I'm more a javascript developer than CSS, so the following may not make sense.

My understanding of the container-queries's circular problem is that a chidl rule could conflict with one of it's parent and influence him back.

However, a browser window (for example), resolve implicitly this problem : there is no way the HTML can influence the size of the window.

Why not create a new value frame for the display property ?

It inherit from all display: block behavior
It's the default value for <HTML>
Any container with this value can't be influenced by it's child. In another words: containers will act as the window will normally do if it was the container. It can't either influence itself (e.g: changing it's own display property).
Any container with this value will still act like a normal block for the "outside world" and could be resize by the environment.
A container query rule it's ignore if performed outside a frame (container:min-width(450px) > .child will be ignore if .container has no display: frame).

Example:

.container {
  display: frame;
  float: left;
}
.container:hover {
   display : block;
}
.child {
  width: 500px;
}
.container:min-width(450px) > .child {
  width: 400px;
}

When .container width >= 450px: child is 400px
When .container widh < 450px, child is 500px, but don't influence the parent size. An scrollbar may be displayed (depending of the overflow-x value)
When hover on the container, both the child and the container are 500px.

Regards,

Abraham

WICG / container-queries

What about "display: frame" ? #11