Share with limits

Each item’s part of a fixed width by weight, when some items have a cap or a floor.

In CSS, flex shares the width by weight, holds an item whose share would pass its max-width or min-width at that limit, and shares what is left among the others, again by weight. Here the third item stops at 100px and the first two share the rest of the 400px; the first item is the query container, and what is inside it reads its width.

Example

Result

Markup

<div class="share-with-limits">
  <b style="--value: 1"><output></output></b>
  <i style="--value: 3"></i>
  <i style="--value: 4; max-width: 100px"></i>
</div>

CSS

@property --result { syntax: '<integer>'; inherits: true; initial-value: 0; }
.share-with-limits output::after { counter-reset: result var(--result); content: counter(result); }
.share-with-limits { display: flex; width: 400px; flex: none; }
.share-with-limits > * { flex: var(--value) 1 0px; min-width: 0; }
.share-with-limits > b { container-type: inline-size; }
.share-with-limits > b > output { --result: round(100cqw / 1px); }

Limits

a fixed row width, a flex-basis of 0, no margins, padding or borders on the items, and no gap on the row
each item’s min-width no greater than its max-width: where they conflict the minimum wins (CSS Sizing 3 §3.1), so an item with a min-width of 250 and a max-width of 100 takes 250
the limits as min-width and max-width on the items
weights of 0 or more, adding up to at least 1 over the items not held at a limit: under 1, flex can leave part of the row empty
with both floors and caps passed at once, CSS Flexbox 1 §9.7 decides which items to hold at their limits; what is left is still shared by weight
min-width: 0 on the items without a floor, so their text doesn’t become one
a whole-number answer: the 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
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

	Chrome	Safari	Firefox
Example	140	26	158

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.