Description
Container size queries provide a number of advantages over media (viewport) size queries, besides the ability to query nested elements. In order to access those benefits, and also provide a 'default' outer container, authors will commonly want to add containment to the root element . In addition, authors rarely rely on intrinsic sizing of the root - setting html { height: 100%; } is a well established pattern in reset styles, to size with the viewport – making the root a good candidate for 2-axis size containment.
The resulting expectation is that this should work:
html {
container-type: size;
block-size: 100%; /* extrinsic viewport height */
overflow: auto; /* scrollbars if needed */
}However, this doesn't currently work as expected in any browser. See this simplified demo on codepen. The primary issue seems to be a combination of factors:
sizecontainment (and the explicitheightorblock-sizeproperties) keeps the root element from resizing to it's contents- The root element never shows scrollbars, they are always propagated to the viewport
- In many cases, the body element
overflowvalue is used instead of the root elementoverflow layoutcontainment stops propagation of theoverflowproperty from the body to the viewport
This is not supported by CSS Overflow and CSS Containment specs:
- Containment should only stop propagation of properties defined on the body element, not properties defined on root
- UAs should only defer to the body overflow when the root overflow is
visible - If the resulting value on the viewport is
visible(which is the initial value of the property), then it should be treated asauto
In my mind that means:
- It's likely (but not clear) that we should get
autoon the viewport by default, even if we try and fail to propagate from body. This might be a browser bug. - When we have a non-default root overflow specified, it should absolutely propagate to the viewport. This is certainly a browser bug (in all browsers).
In another conversation, @fantasai has also suggested that we might want to explicitly propagate root containment to the viewport.
Note that this also causes issues if we change the containment to inline-size, because it generates a new positioning context on root. Since overflow still propagates, and root isn't able to be a scroller itself, position: fixed elements no longer remain in view when scrolling. I have another slightly more complicated pen that helps explore all the various interactions. In order to achieve roughly the desired outcome with either 1d or 2d containment, authors would currently have to set:
html {
container-type: size; /* or inline-size */
}
html, body {
block-size: 100%;
}
body {
overflow: auto;
}This allows the body to act as the outer scroller, with fixed elements still positioned by the root.
Ideally, our solution here should allow both size and inline-size root containers, without breaking viewport overflow or fixed positioning.