Sum of two maxes

The largest ascent plus the largest descent: max(a) + max(d), from one row.

In CSS, in a flex row with align-items: baseline, items line up on their baselines, so the row is as tall as the largest part above a baseline plus the largest part below it (CSS Flexbox 1 §9.4; its §9.9.2 gives a flex container’s intrinsic height as its tallest item instead, and Chrome 155, WebKit 26.4 and Firefox 158 size this grid row by the line). Each item’s baseline is an empty line --a px from its top and --d px from its bottom; a query container before the row, in the same grid row, reads its height.

Example

Result

Markup

<div class="sum-of-two-maxes">
  <b><output></output></b>
  <div>
    <i style="--a: 30; --d: 10"></i>
    <i style="--a: 12; --d: 40"></i>
    <i style="--a: 20; --d: 25"></i>
  </div>
</div>

CSS

@property --result { syntax: '<integer>'; inherits: true; initial-value: 0; }
.sum-of-two-maxes output::after { counter-reset: result var(--result); content: counter(result); }
.sum-of-two-maxes { display: inline-grid; align-content: start; grid-template-columns: 4em auto; }
.sum-of-two-maxes > div { display: flex; align-items: baseline; }
.sum-of-two-maxes > div > i { font-size: 0; line-height: 0; padding: calc(var(--a) * 1px) 0 calc(var(--d) * 1px); }
.sum-of-two-maxes > div > i::before { content: ""; display: inline-block; }
.sum-of-two-maxes > b { container-type: size; }
.sum-of-two-maxes > b > output { --result: round(100cqh / 1px); }

Limits

items whose baseline is set: here an empty line, font-size and line-height 0, between padding --a and --d
--a and --d of 0 or more: padding can’t be negative
no margins on the items
a query container with container-type: size in the row’s grid row, with no padding above or below
the row as tall as the flex row: a grid held taller stretches its row, and the read with it (align-content: start here)
a whole-number answer: the read rounds to 1px
each answer under 1,000,000: from a million up, Chrome passes --result on as 1e+06, which counter-reset rejects, so the counter prints 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

	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.