Equal growth with a cap

Example

<div class="equal-growth-with-a-cap">
  <b><output></output></b>
  <b><output></output></b>
  <b><output></output></b>
</div>

@property --result { syntax: '<integer>'; inherits: true; initial-value: 0; }
.equal-growth-with-a-cap output::after { counter-reset: result var(--result); content: counter(result); }
.equal-growth-with-a-cap { display: grid; width: 300px; flex: none; grid-template-columns: minmax(0, 50px) minmax(0, 120px) minmax(0, 200px); }
.equal-growth-with-a-cap > b { container-type: inline-size; }
.equal-growth-with-a-cap > b > output { --result: round(100cqw / 1px); }

Limits

• a definite width on the grid: past the sum of the caps, the rest stays empty
• caps as lengths of 0 or more, not fr: fr shares by ratio, not equally up to a cap
• one track and one query container per item, written together in each grid’s own rule: grids with other caps on one page need a class each
• each query container fills its track, with no width, padding or border of its own: one given a width reads that width, whatever its track
• no column gap: a gap comes off the width before it is shared
• whole-number answers: each read rounds to 1px
• the example at its own width as a flex item (flex: none here): a flex row shrinks it, and the read with it
• 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.