Percent of the max

Example

<div class="percent-of-the-max">
  <div style="--value: 60">
    <i></i>
    <b><output></output></b>
  </div>
  <div style="--value: 200">
    <i></i>
    <b><output></output></b>
  </div>
  <div style="--value: 150">
    <i></i>
    <b><output></output></b>
  </div>
</div>

@property --result { syntax: '<integer>'; inherits: true; initial-value: 0; }
.percent-of-the-max output::after { counter-reset: result var(--result); content: counter(result); }
.percent-of-the-max { display: inline-grid; width: max-content; grid-template-columns: auto; }
.percent-of-the-max > div > i { display: block; width: calc(var(--value) * 1px); }
.percent-of-the-max > div > b { display: block; container-type: inline-size; }
.percent-of-the-max > div > b > output { --result: round(var(--value) * 1px / 100cqw * 100); }

Limits

• one query container per row: cqw reads only the nearest one
• values of 0 or more, at least one above 0: with all 0 the percent divides by 0
• the grid at its natural width (width: max-content): a grid stretched by its parent, as an item of a grid or of a column flexbox, stretches its auto columns, and the read with them
• whole percents: the read rounds, and an exact half can round down in Chrome, 57.5% to 57 (Chrome 155: 2 of the 260 halves with a largest value up to 200; WebKit 26.4 and Firefox 158: none)
• no margins, padding or borders on the items or the query containers: they add to the widths read, and 100cqw reads the content box
• each query container stretched across its track (justify-items and justify-self at their defaults): aligned to a side or the center, it shrinks to its content, none, and reads 0
• no other registration of --result on the page: a later @property --result that doesn’t inherit leaves the read right and the counter at 0

Browser support

Each row gives the first versions that support every feature its example uses, by MDN’s browser-compat-data. The Example was run in Chrome 155, Safari’s WebKit 26.4 and Firefox 158.