Repository navigation
[css-conditional-5] How to resolve cq* values against a container size resolved at used value time? #14384
Description
For example:
<div id=container style="container-type: inline-size; width: min-content;">
<div id=element style="height: 10cqw">height?</div>
</div>
<script>
getComputedStyle(element).height; // ?
</script><length> in height must compute to an absolute value, but min-content resolves at used value time. Should the computed/used height resolve to 0px?
https://drafts.csswg.org/css-conditional-5/#container-lengths
Activity
bfgeek commentedon Aug 24, 2026
Height also resolves at used value time, and should just return the used value? (I'm not sure I understand your concern).
https://drafts.csswg.org/cssom-1/#resolved-values
emilio commentedon Aug 24, 2026
Container queries need to interleave layout and styling, thus
width: min-contentis a definite width by the time you get to resolving10cqwin#element. So the height of#elementis just a pixel value.cdoublev commentedon Aug 25, 2026
Correct. I should have used
font-size: 10cqwinstead ofheight: 10cqw, because the resolved value offont-sizemust be its computed value, which must be an absolute<length>.My concern was that the spec says that
cq*values "are evaluated based on the computed values of the query container". And the computed value ofmin-contentforwidthis "as specified".Thanks for this clarification.
To be clear, in Chrome 151 and Firefox ESR 140, the resolved
heightis0pxin my example. So I assume you are saying that the height of#elementis expected to be that pixel value computed between style and layout.I also assume it might be worth clarifying this in the spec, and so I am leaving this issue open.
emilio commentedon Aug 25, 2026
This should be "based on the used values" probably.
Add support for resolving <length>
Add support for resolving <length>