CSS has units that are relative to the viewport: vw, vh, vmin, vmax.

Is there anything in CSS that I can use to determine the size of an element's container? For example, say I have:

<div>
   <p>Hello, world!</p>
</div>

I would like to apply styles to the p tag that are relative to the container's size (the div in this case). Is this possible?

CodePudding user response：

Yes they exist but you still need to wait for too long before using them.

From the Specification

Container query length units specify a length relative to the dimensions of a query container. Style sheets that use container query length units can more easily move components from one query container to another.

Find the relevant github discussion here: https://github.com/w3c/csswg-drafts/issues/5888