I looked into this again briefly.
A comment, you need to set a parent “container” to be a container for this to work. If you don’t, the page container is used and the units don’t behave any different to vh and vw.
E.g.
However, as I suspected, using these units and always setting the container to be the embedded view or the parent container (flex/coord/etc) will result in a vast array of differing font sizes, since it’s based on the size of the container (embedded view / flex container / etc) and these will more than likely be different for different elements. See the example above, where the top and bottom embedded views are both instances of the same view, but one is made wider resulting in the font size being larger.
I thought I had font sizes mostly sorted with rem units and media queries to set the root font-size based on screen size, however a colleague came to me yesterday with an issue where he’s embedded main overview views onto a wider overview page where the embedded main overviews are made smaller to fit on the 1 page, and obviously the font size is now still relative to screen size rather than the size of the embedded view container, and hence the fonts are too big to fit… Using container query units would fix this, however at the expense of standardised font sizes which makes it look unprofessional… the font size saga continues.
Waffle…
Edit: The above is true for cqw and cqh, but cqmax and cqmin (and by extension the i and b units) don’t seem to have this behaviour…
i.e. below blue bordered containers are the same embedded views at different sizes. the cqmax labels, despite being contained within different max-size containers, are both the same size. Whereas the cqw labels are different sizes. I need to read up more on how the cqi and cqb units work..
Edit2:
OK, so container-type: inline-size only looks at the width, for a horizontal language like English, and cqmax looks at both width (i - inline) and height (b - block), and because inline-size only provides the width, this container is ignored and it searches further up the tree until it finds a container-type: size which provides both width and height, or the viewport itself. So if I set the embedded views instead to container-type: size, they become effectively the same size as cqw in this instance..


