@react-x11/components 0.14.1 → 0.16.1

package/src/html/layout/flex.ts

@@ -34,6 +34,7 @@ import { Box, PAINT_ORDER, isBlank } from './boxes.js';
 import {
   FLEXED_HEIGHT,
   MIN_CONTENT_PROBE,
+  STRETCHED_ACROSS,
   USED_HEIGHT,
   centreButton,
   clampHeight,
@@ -50,11 +51,13 @@ import {
   transferredHeight,
   transferredWidth,
   heightFromWidth,
+  heightThroughRatio,
   widthFromHeight,
   resolveEdges,
 } from './block.js';
 import { layoutGrid } from './css-grid.js';
 import { firstBaselineIn } from './inline.js';
+import { TABLE_CONTENT } from './table.js';
 import type { LayoutContext } from './block.js';
 
 // `react-x11/yoga` re-exports yoga's own declarations, so the node shape and
@@ -121,7 +124,6 @@ export function layoutFlex(
   // and the measure that asked came back vast: a row beside such an item
   // was squeezed to wrap every word.
   const bounded = Number.isFinite(contentWidth);
-  if (bounded) root.setWidth(contentWidth);
   // The content box's height, where it is definite: a length or a
   // percentage that resolves, or what `aspect-ratio` makes of the width —
   // less the padding and borders a `border-box` height holds, which put
@@ -132,18 +134,22 @@ export function layoutFlex(
   const definite = percentBaseInside(box);
   const own = Number.isFinite(definite);
   const height = USED_HEIGHT.get(box) ?? (own ? definite : null);
-  // whether its content may come to more than it is tall
-  let capped = height !== null;
+  // the limits on its content box's height where it has none of its own
+  let floor = 0;
+  let ceiling = Infinity;
   if (height !== null) root.setHeight(height);
   else {
     root.setHeightAuto();
     const extra = box.verticalExtra;
     const min = clampHeight(box, extra) - extra;
-    if (min > 0) root.setMinHeight(min);
+    if (min > 0) {
+      floor = min;
+      root.setMinHeight(min);
+    }
     const max = clampHeight(box, Infinity) - extra;
     if (Number.isFinite(max)) {
-      root.setMaxHeight(Math.max(0, max));
-      capped = true;
+      ceiling = Math.max(0, max);
+      root.setMaxHeight(ceiling);
     }
   }
 
@@ -169,6 +175,17 @@ export function layoutFlex(
     );
   } else PAINT_ORDER.delete(box);
 
+  // Whether a line weighs its items one against another as it shrinks
+  // them, each by its flex base size (CSS Flexbox 9.7, step 4c): the one
+  // line of a row that does not wrap, two or more of whose items may
+  // shrink. One that shrinks alone comes to the room the rest leave it,
+  // whatever its base, and a line of a row that wraps is too narrow for
+  // an item only where that is alone on it.
+  const weighs =
+    box.style.flexWrap === 'nowrap' &&
+    box.style.flexDirection.startsWith('row') &&
+    flowing.filter((child) => child.style.flexShrink > 0).length > 1;
+
   const items: { box: Box; node: YogaNode; laid: Laid }[] = [];
   for (const child of flowing) {
     const node = Y.Node.create(flexConfig());
@@ -181,17 +198,112 @@ export function layoutFlex(
       stretch: NaN,
       main: NaN,
       least: NaN,
+      most: NaN,
+      basis: NaN,
+      sized: false,
+      content: NaN,
+      fitted: NaN,
+      base: NaN,
+      narrowest: NaN,
       held: NaN,
+      minimum: NaN,
       auto: false,
+      across: false,
+      unstretched: NaN,
     };
-    applyItem(node, child, ctx, contentWidth, laid, height !== null, own);
+    applyItem(
+      node,
+      child,
+      ctx,
+      contentWidth,
+      laid,
+      height !== null,
+      own ? definite : NaN,
+      weighs,
+    );
     root.insertChild(node, items.length);
     items.push({ box: child, node, laid });
   }
 
+  // A column that wraps is as wide as its content box, but each of its
+  // lines is as wide as its widest item, every item `fit-content` across
+  // (CSS Flexbox 9.4, steps 7 and 8), and so is placed across here and not
+  // by Yoga (`crossLines`). Yoga stretched an item to the box wherever the
+  // column had room for every item down it — with no height, always — so a
+  // line was the box's width, an item wider at its narrowest ran out of
+  // it, and `align-content` had no room to centre or end a line in. And
+  // stretching a line, it laid each stretched item out again at its height
+  // less its top and bottom margins and plus its side ones (its multi-line
+  // pass adds the margins across a column where it means the ones down
+  // it), and added what `space-around` puts between lines to its width. So
+  // Yoga lays the box out with every item at its line's start, where it
+  // measures each `fit-content` (`innerWidth`) and down the column as wide
+  // as that, as the specification measures a line's items (9.2, step 3),
+  // and the lines one more pixel apart than they are, so that each line
+  // starts where the last does not and says which items are on it.
+  const crossed = wrapsColumn(box.style, contentWidth);
+  if (crossed) {
+    root.setAlignContent(Y.ALIGN_FLEX_START);
+    root.setGap(Y.GUTTER_COLUMN, columnGap + 1);
+    for (const { node } of items) node.setAlignSelf(Y.ALIGN_FLEX_START);
+  }
+  if (bounded) root.setWidth(contentWidth);
+
   const direction =
     box.style.direction === 'rtl' ? Y.DIRECTION_RTL : Y.DIRECTION_LTR;
   const row = box.style.flexDirection.startsWith('row');
+  // Yoga aligns the lines of a box that wraps, or of a row that aligns by
+  // baselines, in one pass of its own, which drops a margin
+  // (`lineMarginFix`) — and not those of a column that does not wrap,
+  // whatever it aligns by, whose margins Yoga keeps
+  let baselines =
+    row &&
+    (box.style.alignItems === 'baseline' ||
+      items.some(({ box: child }) => child.style.alignSelf === 'baseline'));
+  // An `auto` margin across a row that wraps takes the room its line has
+  // past the item (CSS Flexbox 8.1, 9.6), where Yoga's pass that sets the
+  // items across their lines reads an item's alignment and not its
+  // margins: it stretched one with `margin-top: auto` to its line, and set
+  // one with a height at its line's start. So Yoga is told the alignment
+  // the margins come to (`autoAcross`), which it then places it by.
+  if (row && box.style.flexWrap !== 'nowrap') {
+    const reverse = box.style.flexWrap === 'wrap-reverse';
+    for (const { box: child, node } of items) {
+      const aligned = autoAcross(child.style, reverse);
+      if (aligned) node.setAlignSelf(ALIGN[aligned]);
+    }
+  } else if (baselines) {
+    // Yoga takes a row that does not wrap through that pass as well, and
+    // sets its line there as tall as its items and not the row: an item
+    // centred or at the end of a row of a height was centred or ended in
+    // the items' height. It has sized that line already, as the most any
+    // item reaches down to its bottom edge — a baseline, to Yoga — and the
+    // largest bottom margin besides, whichever items those are: a row of
+    // no height of its own was as tall as both. And it sets an item with
+    // an `auto` margin by its baseline: at the top, where the margin puts
+    // it at the bottom, and every item beside it as far down as its height
+    // reached. That item takes no part in aligning the line by baselines
+    // (9.4 step 8), and Yoga is told the alignment its margins come to.
+    // With fewer than two items left that do take part, they come to their
+    // line's start (8.3), which Yoga is told as well: then nothing in the
+    // row is aligned by its baseline, Yoga takes no such pass, and the line
+    // is the row. Two or more are lined up by their baselines once those
+    // are known (`baselineLines`), and the row laid out again with none.
+    for (const { box: child, node } of items) {
+      const aligned = autoAcross(child.style, false);
+      if (aligned) node.setAlignSelf(ALIGN[aligned]);
+    }
+    const aligned = items.filter(({ box: child }) =>
+      byBaseline(box.style, child.style),
+    );
+    if (aligned.length < 2) {
+      for (const { node } of aligned) node.setAlignSelf(Y.ALIGN_FLEX_START);
+      if (box.style.alignItems === 'baseline') {
+        root.setAlignItems(Y.ALIGN_FLEX_START);
+      }
+      baselines = false;
+    }
+  }
   // frozen at its least size on the one line of a box that does not
   // wrap, by a basis where Yoga takes one along the main axis
   // (`applyItem`'s `setBasis`)
@@ -199,30 +311,81 @@ export function layoutFlex(
     frozen: box.style.flexWrap === 'nowrap',
     basis: row ? bounded : height !== null,
   };
-  const ask = (): void =>
+  const layout = (): void =>
     root.calculateLayout(
       bounded ? contentWidth : Number.NaN,
       height ?? Number.NaN,
       direction,
     );
-  // the one line of a box that does not wrap may be short of room, where
-  // the box has a size along it that its items do not make: and Yoga's
-  // answer for a line every item of which its minimum stops is put right
-  // (`stoppedLine`)
-  const short = hold.frozen && (row ? bounded : capped);
+  // Down a column that wraps, the items Yoga stretches across their lines
+  // come out of its layout at another height than it sized them at, where
+  // their side margins are not their top and bottom ones (`unstretch`):
+  // laid out so that each has the height it was sized at
+  const restretched = row || hold.frozen ? [] : stretchedDown(root, items);
+  const sized = bounded ? contentWidth : null;
+  // and across a row that wraps, the items Yoga stretches across lines
+  // `align-content` spaces out come out of its layout as tall as their
+  // line and the room after it as well (`unspace`): laid out so that each
+  // is as tall as its line, where the box has room to space them out in —
+  // a height, or a minimum one — and with the lines at its start where it
+  // may be too short for them, a height or a maximum one
+  const spaced =
+    row &&
+    bounded &&
+    !hold.frozen &&
+    (height !== null || floor > 0 || ceiling < Infinity) &&
+    spacesLines(box.style);
+  const ask =
+    restretched.length > 0
+      ? (): void => unstretch(items, restretched, sized, layout)
+      : spaced
+        ? (): void =>
+            unspace(root, items, box.style.flexWrap === 'wrap-reverse', layout)
+        : layout;
+  // The one line of a box that does not wrap is shared out by CSS
+  // Flexbox 9.7 where Yoga's answer for it may not be what that makes of
+  // it (`resolveLine`): along a row of a width, or down a column of a
+  // height or of limits on one, where a line may have room to share out
+  const line: FlexLine | null =
+    hold.frozen &&
+    (row ? bounded : height !== null || floor > 0 || ceiling < Infinity)
+      ? {
+          resolved: false,
+          size: row ? contentWidth : (height ?? NaN),
+          floor,
+          ceiling,
+          between: betweenOf(items, row, row ? columnGap : rowGap),
+          probe: row && contentWidth === MIN_CONTENT_PROBE,
+        }
+      : null;
+  // and the lines of a box that wraps may have room left over, where a
+  // row has a width to have it in: Yoga's answer for one every item of
+  // which that may grow its maximum stops is put right (`cappedLines`) —
+  // broken into lines as Yoga breaks them, at the box's size along them
+  const roomy = !hold.frozen && (row ? bounded : true);
+  const breaks = row ? contentWidth : (height ?? Infinity);
   // each item's size along the main axis, read the once a layout (`Laid`)
   const read = (): void => {
     for (const { node, laid } of items) {
-      laid.main = row ? node.getComputedWidth() : node.getComputedHeight();
+      laid.main = row ? node.getComputedWidth() : heightOf(node, laid);
     }
   };
   const calculate = (): void => {
+    // a line shared out here is again, before Yoga places it: an item
+    // since held at its content's size is frozen there (`autoMinimums`)
+    if (line?.resolved) shareOut(items, row, line, hold);
     ask();
     read();
-    if (!short) return;
-    const room = row ? contentWidth : (height ?? root.getComputedHeight());
-    const gap = row ? columnGap : rowGap;
-    if (stoppedLine(items, row, room, gap, hold, ask)) read();
+    if (line && !line.resolved) {
+      const room = Number.isNaN(line.size)
+        ? root.getComputedHeight()
+        : line.size;
+      if (resolveLine(items, row, line, room, hold, ask)) read();
+    } else if (roomy) {
+      const room = row ? contentWidth : (height ?? root.getComputedHeight());
+      const gap = row ? columnGap : rowGap;
+      if (cappedLines(items, row, room, breaks, gap, hold, ask)) read();
+    }
   };
   ctx.flexDepth = depth + 1;
   try {
@@ -241,30 +404,74 @@ export function layoutFlex(
     ctx.flexDepth = depth;
   }
 
-  // Yoga aligns the lines of a box that wraps, or aligns by baselines, in
-  // one pass of its own, which drops a margin (`lineMarginFix`)
-  const baselines =
-    box.style.alignItems === 'baseline' ||
-    items.some(({ box: child }) => child.style.alignSelf === 'baseline');
+  // The lines of a row that wraps are as tall as their tallest items, each
+  // as tall as its content across (CSS Flexbox 9.4, steps 7 and 8), and
+  // `align-content` stretches lines short of the box to it, or centres
+  // them, or ends them, past its edges where they are taller (step 9).
+  // Handed the box's height as a size, Yoga measures a stretched item at it
+  // wherever the row has room along it for every item, and so its line is
+  // the box's height: an item taller than the box was squashed to it, and a
+  // line `align-content` centres stayed at the box's top. Where that is so
+  // (`heldLine`), the box is held to its height from both sides instead,
+  // and laid out again: Yoga measures each item as at most that tall, which
+  // its content passes where it is taller — the maximum a percentage, as a
+  // minimum and a maximum that are the same are a size to Yoga. Only there,
+  // which takes in the one line `space-around` and `space-evenly` centre,
+  // and not where the row is measured for its widest, which is laid out
+  // for its width alone.
+  if (
+    row &&
+    bounded &&
+    height !== null &&
+    box.style.flexWrap !== 'nowrap' &&
+    heldLine(box, ctx, items, height, contentWidth, columnGap)
+  ) {
+    root.setHeightAuto();
+    root.setMinHeight(height);
+    root.setMaxHeightPercent(100);
+    // and a percentage height resolved: Yoga takes one inside a box it
+    // does not hold to a size for none, and measured `h-1/2` as tall as
+    // its content
+    if (own) {
+      for (const { box: child, node } of items) {
+        const set = child.style.height;
+        if (!isPct(set)) continue;
+        const down =
+          child.style.boxSizing === 'border-box' ? 0 : child.verticalExtra;
+        node.setHeight(resolve(set, definite) + down);
+      }
+    }
+    ctx.flexDepth = depth + 1;
+    try {
+      calculate();
+    } finally {
+      ctx.flexDepth = depth;
+    }
+  }
+
+  // whether Yoga's last layout took its pass for lines (`placeItems`)
+  let lined = box.style.flexWrap !== 'nowrap' || baselines;
   let bottom = placeItems(
     box,
     ctx,
     items,
     row,
     own,
-    box.style.flexWrap === 'wrap' || baselines,
+    lined,
     contentWidth,
+    undefined,
+    crossed ? crossLines(box.style, items, contentWidth, columnGap) : undefined,
   );
   // Items aligned by their baselines, which Yoga cannot see, are aligned
   // with their baselines known (`baselineLines`)
   // by the flex layout again, set at their lines' starts with the margins
   // that put their baselines together, which makes each line as tall as
   // that does
-  const lines = row && baselines ? baselineLines(box.style, items) : null;
+  const lines = baselines ? baselineLines(box.style, items) : null;
+  const started = new Set<Box>();
   if (lines) {
     // every one of them, and the box's own `baseline` too, which is what
     // takes Yoga down that pass
-    const started = new Set<Box>();
     for (const line of lines) {
       line.forEach(({ box: child, node }, i) => {
         node.setAlignSelf(Y.ALIGN_FLEX_START);
@@ -275,6 +482,8 @@ export function layoutFlex(
     if (box.style.alignItems === 'baseline') {
       root.setAlignItems(Y.ALIGN_FLEX_START);
     }
+    // so it takes it only where the row wraps
+    lined = box.style.flexWrap !== 'nowrap';
     ctx.flexDepth = depth + 1;
     try {
       calculate();
@@ -287,7 +496,7 @@ export function layoutFlex(
       items,
       row,
       own,
-      box.style.flexWrap === 'wrap',
+      lined,
       contentWidth,
       started,
     );
@@ -315,8 +524,9 @@ export function layoutFlex(
       items,
       row,
       own,
-      box.style.flexWrap === 'wrap' || baselines,
+      lined,
       contentWidth,
+      started,
     );
   }
 
@@ -348,6 +558,10 @@ function keepRatios(
         box.verticalExtra;
     if (Math.abs(basis - laid.main) < 0.5) continue;
     node.setFlexBasis(basis);
+    // and is shared out from it where its line is here (`shareOut`)
+    laid.basis = basis;
+    laid.sized = false;
+    laid.base = basis;
     // one held at its least size (`holdAt`) flexes from the new basis, no
     // further down than that
     if (!Number.isNaN(laid.held)) {
@@ -496,22 +710,38 @@ function placeItems(
   /** The flex box's content width: its items' containing block's. */
   contentWidth: number,
   started?: ReadonlySet<Box>,
+  /** Where each item is across a column that wraps (`crossLines`). */
+  crossed?: ReadonlyMap<Box, Across>,
 ): number {
   let bottom = 0;
+  // the lines of a row that wraps in reverse are turned round to run up it
+  const reverse = row && box.style.flexWrap === 'wrap-reverse';
   for (const { box: child, node, laid } of items) {
-    const across = lined
-      ? lineMarginFix(box.style, child, node, row, started?.has(child))
-      : 0;
-    const left = box.contentX + node.getComputedLeft() + (row ? 0 : across);
-    const top = box.contentY + node.getComputedTop() + (row ? across : 0);
-    const width = meant(
-      row ? laid.main : node.getComputedWidth(),
-      laid.set,
-      laid.stretch,
-      laid.width,
-      row ? laid.held : NaN,
-    );
-    const itemHeight = row ? node.getComputedHeight() : laid.main;
+    const placed = crossed?.get(child);
+    const across =
+      lined && !placed
+        ? lineMarginFix(box.style, child, node, row, own, started?.has(child))
+        : 0;
+    const itemHeight = row ? heightOf(node, laid) : laid.main;
+    const left =
+      box.contentX +
+      (placed ? placed.x : node.getComputedLeft() + (row ? 0 : across));
+    // which Yoga turns an item round in by the height it laid it out at, and
+    // not the one it is (`unspace`)
+    const top =
+      box.contentY +
+      node.getComputedTop() +
+      (row ? across : 0) +
+      (reverse ? node.getComputedHeight() - itemHeight : 0);
+    const width = placed
+      ? placed.width
+      : meant(
+          row ? laid.main : node.getComputedWidth(),
+          laid.set,
+          laid.stretch,
+          laid.width,
+          row ? laid.held : NaN,
+        );
     // The item is laid out again at the width the flex pass settled on: the
     // measure function answered a question, and the answer is not a layout —
     // its line breaks were computed against a width that may have changed
@@ -593,7 +823,8 @@ function layoutItemAt(
   // one: the tallest card of a row is laid out the once. A table shares
   // what it is given past its rows among them (`layoutTable`), and a
   // height short of them is none it can have: it is laid out again where
-  // it was given more.
+  // it was given more — or less than a height of its own, which it takes
+  // in place of that one, down to its rows.
   const given = definite ?? (column ? height : null);
   let shares = false;
   if (given !== null && (box.kind === 'flex' || box.kind === 'table')) {
@@ -601,7 +832,8 @@ function layoutItemAt(
     shares =
       box.kind === 'flex'
         ? !(Math.abs(natural - given) <= 0.01)
-        : !(natural >= given - 0.01);
+        : !(natural >= given - 0.01) ||
+          (box.style.height !== AUTO && natural > given + 0.01);
   }
   if (given !== null) {
     const inner = Math.max(0, given - box.verticalExtra);
@@ -624,7 +856,7 @@ function layoutItemAt(
     const heights = definite !== null ? FLEXED_HEIGHT : USED_HEIGHT;
     heights.set(box, tall);
     try {
-      ctx.layoutSubtree(box, width, containing);
+      layoutAt(box, ctx, width, containing, laid);
     } finally {
       heights.delete(box);
     }
@@ -666,7 +898,7 @@ function applyContainer(node: YogaNode, style: ComputedStyle): void {
   if (justify !== Y.JUSTIFY_FLEX_START) node.setJustifyContent(justify);
   const items = ALIGN[style.alignItems] ?? Y.ALIGN_STRETCH;
   if (items !== Y.ALIGN_STRETCH) node.setAlignItems(items);
-  const lines = ALIGN[style.alignContent] ?? Y.ALIGN_STRETCH;
+  const lines = ALIGN[crossContent(style)] ?? Y.ALIGN_STRETCH;
   if (lines !== Y.ALIGN_FLEX_START) node.setAlignContent(lines);
 }
 
@@ -678,11 +910,16 @@ function applyItem(
   laid: Laid,
   /** Whether the flex box has a height its items are laid out in. */
   tall: boolean,
-  /** Whether that height is definite, and a percentage may be of it: one a
-   *  column flexed the box to is not (`USED_HEIGHT`). */
-  own: boolean,
+  /** That height where it is definite, and a percentage may be of it, and
+   *  else NaN: one a column flexed the box to is not (`USED_HEIGHT`). */
+  definite: number,
+  /** Whether its line weighs it against another as it shrinks them, by
+   *  their flex base sizes (`layoutFlex`). */
+  weighed: boolean,
 ): void {
   const style = box.style;
+  const own = Number.isFinite(definite);
+  const row = box.parent?.style.flexDirection.startsWith('row') ?? true;
   laid.stretch = containingWidth - box.marginLeft - box.marginRight;
   // an `auto` margin takes the free space on its side, which is how
   // `margin-left: auto` puts an item at the end of its row (CSS Flexbox
@@ -699,6 +936,14 @@ function applyItem(
   if (style.flexShrink) node.setFlexShrink(style.flexShrink);
   if (style.alignSelf !== AUTO)
     node.setAlignSelf(ALIGN[style.alignSelf] ?? Y.ALIGN_AUTO);
+  // `stretch` sets an item whose height is a percentage of none at its
+  // line's start, as tall as its content (`heightOfNone`), where Yoga,
+  // which is handed no height for it, stretched it across the line
+  if (row && box.parent && heightOfNone(style, own)) {
+    const align =
+      style.alignSelf === AUTO ? box.parent.style.alignItems : style.alignSelf;
+    if (align === 'stretch') node.setAlignSelf(Y.ALIGN_FLEX_START);
+  }
 
   // Yoga's sizes are border boxes, as `box-sizing: border-box` has them;
   // a `content-box` length is the content's, and the item's padding and
@@ -708,15 +953,34 @@ function applyItem(
   if (style.width !== AUTO) {
     laid.set = setLength(node, true, style.width, containingWidth, across);
   }
+  // Down a column, a basis of the content's — `content`, or a percentage
+  // of a height that is not definite (CSS Flexbox 7.2.3) — is its content's
+  // height, whatever height it has of its own (9.2.3, E), and Yoga takes
+  // the height of its own for a basis where it has one. So that is kept
+  // from Yoga, and the measure function answers with the content's.
+  const contentColumn =
+    !row && (style.flexBasis === 'content' || (isPct(style.flexBasis) && !own));
   // a percentage of a height that is not definite is `auto` (CSS 2.1 10.5),
-  // which Yoga makes of one where the flex box has no height at all
-  if (style.height !== AUTO && (own || !tall || !isPct(style.height))) {
-    setLength(node, false, style.height, NaN, down);
+  // and is not handed to Yoga, which makes one of the height of a flex box
+  // with none of its own but limits on one — and the height set on its
+  // node, where that is a length, and whether one is
+  let height = NaN;
+  let heightSet = false;
+  if (
+    style.height !== AUTO &&
+    (own || !isPct(style.height)) &&
+    !contentColumn
+  ) {
+    height = setLength(node, false, style.height, definite, down);
+    heightSet = true;
   }
   // the least it may be along each axis, its border box's, as Yoga is
   // told it
   let leastWidth = NaN;
   let leastHeight = NaN;
+  // and the most, as Yoga is told it
+  let mostWidth = NaN;
+  let mostHeight = NaN;
   const minWidth = resolveOrNull(style.minWidth, containingWidth);
   if (minWidth !== null) {
     leastWidth = minWidth + across;
@@ -724,7 +988,10 @@ function applyItem(
   }
   if (style.maxWidth !== 'none') {
     const maxWidth = resolveOrNull(style.maxWidth, containingWidth);
-    if (maxWidth !== null) node.setMaxWidth(maxWidth + across);
+    if (maxWidth !== null) {
+      mostWidth = maxWidth + across;
+      node.setMaxWidth(mostWidth);
+    }
   }
   if (style.widthKeyword || style.minWidthKeyword || style.maxWidthKeyword) {
     // an intrinsic size is the item's content's, measured here and handed
@@ -744,29 +1011,87 @@ function applyItem(
       leastWidth = size(style.minWidthKeyword);
       node.setMinWidth(leastWidth);
     }
-    if (style.maxWidthKeyword) node.setMaxWidth(size(style.maxWidthKeyword));
+    if (style.maxWidthKeyword) {
+      mostWidth = size(style.maxWidthKeyword);
+      node.setMaxWidth(mostWidth);
+    }
   }
-  const minHeight = resolveOrNull(style.minHeight, NaN);
+  // a percentage of a definite height, which a limit on a flex item's
+  // height is where its flex box has one
+  const minHeight = resolveOrNull(style.minHeight, definite);
   if (minHeight !== null) {
     leastHeight = minHeight + down;
     node.setMinHeight(leastHeight);
   }
   if (style.maxHeight !== 'none') {
-    const maxHeight = resolveOrNull(style.maxHeight, NaN);
-    if (maxHeight !== null) node.setMaxHeight(maxHeight + down);
+    const maxHeight = resolveOrNull(style.maxHeight, definite);
+    if (maxHeight !== null) {
+      mostHeight = maxHeight + down;
+      node.setMaxHeight(mostHeight);
+    }
+  }
+
+  // a `border-box` maximum under the item's padding and borders is them,
+  // its content box none wide (CSS Sizing 3, 3.3), where Yoga lays the
+  // item out as wide as them and shares out its line as though it were
+  // as wide as the maximum: the `auto` margins after `max-width:
+  // 20.668px` with 23px of padding and border took the 2.33px between
+  if (mostWidth < box.horizontalExtra) {
+    mostWidth = box.horizontalExtra;
+    node.setMaxWidth(mostWidth);
+  }
+  if (mostHeight < box.verticalExtra) {
+    mostHeight = box.verticalExtra;
+    node.setMaxHeight(mostHeight);
+  }
+  // a maximum under the minimum is the minimum (CSS 2.1 10.4, 10.7), where
+  // Yoga holds an item that comes to more than both at the maximum
+  if (mostWidth < leastWidth) {
+    mostWidth = leastWidth;
+    node.setMaxWidth(mostWidth);
+  }
+  if (mostHeight < leastHeight) {
+    mostHeight = leastHeight;
+    node.setMaxHeight(mostHeight);
   }
 
-  const row = box.parent?.style.flexDirection.startsWith('row') ?? true;
   laid.least = row ? leastWidth : leastHeight;
+  laid.most = row ? mostWidth : mostHeight;
+  laid.narrowest = leastWidth;
+  // A table is as wide as the flex layout makes it, as any item is: the
+  // size its line flexed it to along a row (9.7), and across a column's
+  // line the line's, stretched (9.4, step 11) — where in a block's flow it
+  // is as wide as its columns. Laid out at that width and then shrunk to
+  // them, it was a table its columns wide at the start of a column, and one
+  // `flex: 1` along a row stopped at them where Chrome's fills its share
+  laid.across =
+    box.kind === 'table' &&
+    (row ||
+      (box.parent !== null &&
+        !style.widthKeyword &&
+        stretches(box, box.parent.style, false)));
   // Yoga takes a length for a basis only where the flex box's main size is
   // definite, and else the item's own size along it: down a column of no
   // height of its own it read `flex: 0 0 3rem` as the item's height, or
   // its content's. There the basis is handed over as that height, which is
   // what the item's own is to a basis anyway — no more than its start
   const setBasis = (px: number): void => {
+    laid.basis = px;
     if (row || tall) node.setFlexBasis(px);
     else node.setHeight(px);
   };
+  // Where Yoga takes the item's own size along the main axis for its
+  // basis, that size as a length, or its content's (`Laid.sized`) — and
+  // its content's, whatever size it has, for a basis that says so, which
+  // Yoga reads as its size down a column
+  const ownSize = (content = false): void => {
+    if (
+      content ||
+      (row ? style.width === AUTO && !style.widthKeyword : !heightSet)
+    ) {
+      laid.sized = true;
+    } else laid.basis = row ? laid.set : height;
+  };
   // down a column, an item with a ratio and a width is as tall as that
   // makes it, for a basis of its content or of its own `auto` height (CSS
   // Flexbox 9.2.3, B) — where Yoga measured it, and its block layout held
@@ -782,24 +1107,36 @@ function applyItem(
     // the content's size along a row, whatever the item's own width says
     // (CSS Flexbox 7.2.3), which Yoga reads as `auto` and takes the width
     // for; along a column, Yoga's measure is the content's
-    node.setFlexBasis(contentBasis(box, ctx, containingWidth));
+    laid.basis = contentBasis(box, ctx, containingWidth);
+    node.setFlexBasis(laid.basis);
   } else if (columnBasis !== null) {
     // but a height of its own hides it from Yoga, and an item with a ratio
     // and a width is as tall as that makes it
     setBasis(columnBasis);
   } else if (style.flexBasis === 'content' || style.flexBasis === AUTO) {
     // Yoga's own
-  } else if (isPct(style.flexBasis) && !row && tall && !own) {
+    ownSize(style.flexBasis === 'content');
+  } else if (isPct(style.flexBasis) && !row && !own) {
     // a percentage of a main size that is not definite is `content` (CSS
     // Flexbox 7.2.3): Yoga's own, down a column
+    ownSize(true);
   } else if (isPct(style.flexBasis)) {
-    // a percentage of the main size, which is known across a row
+    // a percentage of the main size, which is known across a row and down
+    // a column of a definite height: of a content box's size, as a width
+    // is, where the item's padding and border go on top of it
     const basis = style.flexBasis;
-    if (!basis.px && !basis.of) node.setFlexBasisPercent(basis.pct);
-    else if (row && Number.isFinite(containingWidth)) {
-      node.setFlexBasis(resolve(basis, containingWidth));
-    } else if (basis.of) node.setFlexBasisAuto();
-    else node.setFlexBasisPercent(basis.pct);
+    const extra = row ? across : down;
+    const known = row ? Number.isFinite(containingWidth) : own;
+    if (known) {
+      laid.basis = resolve(basis, row ? containingWidth : definite) + extra;
+    }
+    if (!basis.px && !basis.of && !(known && extra)) {
+      node.setFlexBasisPercent(basis.pct);
+    } else if (known) node.setFlexBasis(laid.basis);
+    else if (basis.of) {
+      node.setFlexBasisAuto();
+      ownSize();
+    } else node.setFlexBasisPercent(basis.pct);
   } else setBasis(style.flexBasis + (row ? across : down));
 
   // The item's padding and border belong to Yoga so it can size the item,
@@ -821,8 +1158,14 @@ function applyItem(
   // table cell's is: taken per layout of the container, a flex box in a
   // flex box in a flex box laid its innermost out three times a level,
   // and twelve levels took two seconds.
-  const alongRow = box.parent?.style.flexDirection.startsWith('row') ?? true;
+  const alongRow = row;
   const content = (): number => {
+    const width = maxContent();
+    // its flex base size, where that is its content's (`Laid.sized`)
+    if (alongRow) laid.content = width + box.horizontalExtra;
+    return width;
+  };
+  function maxContent(): number {
     // a replaced element's is the width it has with no limit — its
     // natural one, or what its ratio makes of a height of its own — which
     // its image, loading, may change, so it is not kept; taken as its
@@ -842,12 +1185,17 @@ function applyItem(
     if (width === undefined) {
       width = measureIntrinsicWidth(box, ctx, Infinity) - box.horizontalExtra;
       MAX_CONTENT.set(box, width);
+      // measured, it is laid out with no limit on its width, and not at
+      // the one it was last laid out at, which Yoga may give it again: an
+      // item `min-width: min-content` that Yoga asked at its minimum and
+      // then with no limit was left laid out infinitely wide
+      laid.width = NaN;
     }
     // within what its least and greatest heights make of widths through
     // its ratio: its size before it is flexed, and not after
     const extra = box.horizontalExtra;
     return Math.max(0, transferredWidth(box, width + extra) - extra);
-  };
+  }
   // An item with a ratio is as wide, across a column, as the height it
   // was given makes it through the ratio, where its width is its own to
   // find (CSS Flexbox 9.4, its hypothetical cross size from its used main
@@ -884,27 +1232,114 @@ function applyItem(
     const flexed = box.kind === 'replaced' || !laid.auto;
     const through =
       widthThrough && given && !exact && flexed ? widthThrough(h) : null;
-    // along a row, a replaced element is its own width wherever there is
-    // room for less — its flex base size is not fitted to the room (9.2)
-    // — and across a column it is fitted, as any item is
-    const inner =
+    // Along a row, an item's flex base size is its content at its widest,
+    // whatever the room (CSS Flexbox 9.2.3 E, `content` as `max-content`),
+    // which Yoga asks for as at most the row's width. One that may not
+    // shrink is as wide as that (9.7): fitted to the room, a `shrink-0`
+    // item of words was held to its content at its narrowest, and wrapped
+    // where it overflows the row. And one that may shrink gives up room in
+    // proportion to it, where its line weighs it against another (9.7,
+    // step 4c, its flex shrink factor times its base): fitted, an item of
+    // words wider than the row was weighed as no wider than the row, and
+    // gave up too little of it beside a narrower one — 230 and 70 of a row
+    // of 300, where Chrome has 245 and 55. One that shrinks alone is
+    // fitted, which comes to the same and keeps the layout it is measured
+    // at for the one it is given: at its widest, a paragraph in a row laid
+    // itself out twice.
+    // And every item of a row laid out in no room is fitted, which is the
+    // flex box measured for its content at its narrowest
+    // (`MIN_CONTENT_PROBE`): that is the sum of its items' content at their
+    // narrowest, whatever they may shrink by, as Chrome and the css-flexbox
+    // suite have it (`intrinsic-size/row-001`, `gap-015`), and not their
+    // bases.
+    // Across a column, the item is `fit-content` wide where it is not
+    // stretched (9.4, step 7): fitted to the column, but no narrower than
+    // its content at its narrowest, past the column where that is wider,
+    // as a centred one is on both sides. Its `min-width` has no say in
+    // that: an automatic minimum is the main axis's (4.5), so `auto` is 0
+    // across a column, the same as the `min-width: 0` that lets an item
+    // shrink along a row. Fitted to the column, a word wider than it ran
+    // out of the item, and a centred item started at the column's start.
+    // A replaced element's narrowest is its natural width, or one through
+    // its ratio, and none where it has neither: an SVG with only a
+    // `viewBox` is as wide as the column. And an item with something in
+    // it that takes a percentage of a height is fitted to the column still:
+    // the flex layout makes its height definite only after this, and
+    // measured without it, an image `height: 100%` is its natural width.
+    const widest =
+      alongRow &&
+      !exact &&
+      (box.kind === 'replaced' ||
+        (containingWidth !== MIN_CONTENT_PROBE &&
+          (style.flexShrink === 0 || weighed)));
+    const narrowest =
+      alongRow || percentHeightsIn(box)
+        ? undefined
+        : box.kind === 'replaced'
+          ? () => (replacedMinimum(box, containingWidth) ?? extra) - extra
+          : () => minContentOf(box, ctx, laid) - extra;
+    const fitted =
       through !== null
         ? through
-        : box.kind === 'replaced' && alongRow && !exact
+        : widest
           ? content()
-          : innerWidth(width, wm, content);
+          : innerWidth(width, wm, content, narrowest);
+    // Across a column, no wider than its maximum: Yoga hands the measure
+    // a room within it, but holds the answer's width to it only after,
+    // and keeps the height measured at the wider — an image `max-width:
+    // 100%` its natural width at its narrowest was as tall as that made it
+    const capped =
+      !alongRow && fitted > mostWidth - extra ? mostWidth - extra : fitted;
+    // And no narrower than its minimum: Yoga holds the item to that only
+    // after it has the answer, which it keeps for the width that makes of
+    // it, so an item measured at the room and held to a wider minimum was
+    // as tall as its content wrapped at the room — `min-w-max` in a narrow
+    // row, or down a column narrower than it, one line of words two lines
+    // tall, and an item held to its longest word in a row that wraps
+    // (`holdAt`) a line taller than that makes it. Stretched across a
+    // column, it is asked at the column's width.
+    const inner = Number.isNaN(laid.narrowest)
+      ? capped
+      : Math.max(capped, laid.narrowest - extra);
+    let answer: { width: number; height: number } | undefined;
     if (
       box.kind === 'replaced' &&
       exact &&
       ratio > 0 &&
       style.height === AUTO
     ) {
-      return { width: inner, height: inner / ratio };
+      answer = { width: inner, height: inner / ratio };
+    } else {
+      answer = answers.get(inner);
+      if (answer === undefined) {
+        answer = measureBox(box, ctx, inner, containingWidth, laid);
+        answers.set(inner, answer);
+      }
     }
-    let answer = answers.get(inner);
-    if (answer === undefined) {
-      answer = measureBox(box, ctx, inner, containingWidth, laid);
-      answers.set(inner, answer);
+    // along a row, the width it answered where it might choose one
+    if (alongRow && wm !== Y.MEASURE_MODE_EXACTLY) {
+      laid.fitted = answer.width + box.horizontalExtra;
+    }
+    // down a column, its content's height where nothing held it to one:
+    // its flex base size, where that is its content's (`Laid.sized`) — for
+    // a basis that says so, what a height of its own has no say in
+    if (!alongRow && !given) {
+      if (contentColumn && style.height !== AUTO && box.kind !== 'replaced') {
+        const width = inner + box.horizontalExtra;
+        const kept = keptNatural(box, ctx, width, containingWidth);
+        let content = kept?.content ?? NaN;
+        if (Number.isNaN(content)) {
+          if (kept === null || kept.serial !== box.layoutSerial) {
+            layoutNaturally(box, ctx, width, containingWidth, laid);
+          }
+          content = columnContent(box, ctx, laid, width, containingWidth);
+        }
+        answer = {
+          width: answer.width,
+          height: Math.max(0, content - box.verticalExtra),
+        };
+      }
+      laid.content = answer.height + box.verticalExtra;
     }
     return answer;
   });
@@ -936,12 +1371,51 @@ interface Laid {
   /** The least it may be along the main axis, where its own style says:
    *  the minimum this engine set on its node, or NaN. */
   least: number;
+  /** The most it may be along the main axis, where its own style says: the
+   *  maximum this engine set on its node, or NaN. */
+  most: number;
+  /** Its flex base size (CSS Flexbox 9.2, step 3), its border box's, where
+   *  its style says what that is — a basis or a size along the main axis
+   *  that is a length — or NaN where its content does (`content`) or Yoga
+   *  resolves it. */
+  basis: number;
+  /** Whether its flex base size is its content's size along the main axis,
+   *  which the measure function notes (`content`). */
+  sized: boolean;
+  /** Its content's size along the main axis, its border box's, as the
+   *  measure function last found it with nothing holding it to a size
+   *  there: its max-content width along a row, its height at its width
+   *  down a column. NaN until measured so. */
+  content: number;
+  /** The border-box width the measure function last answered along a row
+   *  where Yoga asked for one it might choose, its content's fitted to the
+   *  room: the flex base size Yoga takes for it (`FlexLine.probe`). */
+  fitted: number;
+  /** The flex base size its line was shared out from where this engine
+   *  shared it (`resolveLine`), or NaN. */
+  base: number;
+  /** The least border-box width its node was given, along a row or across
+   *  a column: its own minimum, or along a row the automatic one it is
+   *  held to (`holdAt`), or NaN. It is measured at no narrower. */
+  narrowest: number;
   /** The size along the main axis it is frozen at, inflexible (`freezeAt`),
    *  or NaN. */
   held: number;
+  /** Its automatic minimum along the main axis (CSS Flexbox 4.5), where it
+   *  is held to it (`holdAt`), or NaN. */
+  minimum: number;
   /** Whether that is its automatic minimum (`holdAt`), its content's size,
-   *  and not a minimum the line stopped at (`stoppedLine`). */
+   *  and not a size its line was shared out to (`resolveLine`). */
   auto: boolean;
+  /** Whether it is a table the flex layout gives its width — flexed along a
+   *  row, stretched across a column's line — which it is laid out at as its
+   *  own (`STRETCHED_ACROSS`, `layoutAt`). */
+  across: boolean;
+  /** Its border box's height as Yoga sized it before it laid it out again
+   *  across its line, at another: down a column that wraps (`unstretch`),
+   *  or across a row whose lines are spaced out (`unspace`). NaN where that
+   *  is the height Yoga has for it. */
+  unstretched: number;
 }
 
 /**
@@ -1080,7 +1554,7 @@ function layoutNaturally(
     box.height = kept.height;
   } else {
     const at = ctx.positioned.length;
-    ctx.layoutSubtree(box, width, containing);
+    layoutAt(box, ctx, width, containing, laid);
     // a replaced box is sized, not laid out, and has no layout to count
     if (box.kind !== 'replaced') {
       NATURAL.set(box, {
@@ -1103,6 +1577,33 @@ function layoutNaturally(
   laid.tall = NaN;
 }
 
+/**
+ * Lay an item out at a border-box width: a table the flex layout gives its
+ * width at that width as its own (`Laid.across`), for this layout alone. A
+ * width Yoga asks its content at is one the table comes to by its columns
+ * all the same — its widest, or the room where that is less — so that is
+ * no matter; an unbounded one, a probe of a box around the flex box, is
+ * the table's to shrink in.
+ */
+function layoutAt(
+  box: Box,
+  ctx: LayoutContext,
+  width: number,
+  containing: number,
+  laid: Laid,
+): void {
+  if (!laid.across || !Number.isFinite(width)) {
+    ctx.layoutSubtree(box, width, containing);
+    return;
+  }
+  STRETCHED_ACROSS.add(box);
+  try {
+    ctx.layoutSubtree(box, width, containing);
+  } finally {
+    STRETCHED_ACROSS.delete(box);
+  }
+}
+
 /**
  * The layout this pass made of an item at its content's own height
  * (`layoutNaturally`), where one at `width` now would be the same: the same
@@ -1246,11 +1747,13 @@ function readsPercentBase(box: Box): boolean {
 
 /** The width an item's content is measured at: the width Yoga gives it
  *  exactly, or its max-content width, no wider than any it may take up to
- *  (CSS Flexbox 9.2). */
+ *  (CSS Flexbox 9.2) — and, given its min-content width, no narrower than
+ *  that either. */
 function innerWidth(
   width: number,
   mode: number,
   maxContent: () => number,
+  minContent?: () => number,
 ): number {
   if (mode === Y.MEASURE_MODE_EXACTLY && Number.isFinite(width)) {
     return Math.max(0, width);
@@ -1260,9 +1763,9 @@ function innerWidth(
     return content;
   }
   // a room exactly as wide as the content, as Yoga holds it, is room for it
-  return content <= width || nearly(content, width)
-    ? content
-    : Math.max(0, width);
+  if (content <= width || nearly(content, width)) return content;
+  const room = Math.max(0, width);
+  return minContent ? Math.min(content, Math.max(room, minContent())) : room;
 }
 
 /**
@@ -1290,12 +1793,6 @@ function autoMinimums(
   for (const { box, node, laid } of items) {
     if (box.kind === 'text' || box.kind === 'break') continue;
     const style = box.style;
-    // a box that scrolls or clips has none, but for one that asks for its
-    // content's height
-    const asked = !row && style.minHeightKeyword !== null;
-    if (!asked && scrolls(style)) {
-      continue;
-    }
     const width = meant(
       row ? laid.main : node.getComputedWidth(),
       laid.set,
@@ -1303,6 +1800,39 @@ function autoMinimums(
       laid.width,
       row ? laid.held : NaN,
     );
+    // A table is no smaller than it can be along either axis, whatever its
+    // own least says, `min-width: 0` and `min-height: 0` among it: its
+    // columns at their narrowest along a row, and down a column its rows
+    // and captions at the width it has, however short a height of its own
+    // is (CSS 2.1 17.5.2 and 17.5.3; Blink, `length_utils.cc`: "Tables
+    // can't shrink below their min-intrinsic size"). The line is laid out
+    // with it so, and the items after it start where it ends: Yoga had it
+    // as small as its line, and the next item over the rest of it — read
+    // as a block's content, two pixels into it, the spacing under its rows
+    if (box.kind === 'table') {
+      // as wide as its columns at their widest, where Yoga measured that,
+      // it has room for them at their narrowest, which is a layout less
+      const widest = row ? MAX_CONTENT.get(box) : undefined;
+      if (
+        widest !== undefined &&
+        laid.main >= widest + box.horizontalExtra - 0.01
+      ) {
+        continue;
+      }
+      const least = row
+        ? minContentOf(box, ctx, laid)
+        : tableContent(box, ctx, width, containingWidth, laid);
+      if (laid.main >= least - 0.01) continue;
+      holdAt(node, laid, row, least, hold);
+      changed = true;
+      continue;
+    }
+    // a box that scrolls or clips has none, but for one that asks for its
+    // content's height
+    const asked = !row && style.minHeightKeyword !== null;
+    if (!asked && scrolls(style)) {
+      continue;
+    }
     // a replaced item's content along a row is its natural width
     if (row && box.kind === 'replaced') {
       if (style.minWidth !== AUTO || style.minWidthKeyword) continue;
@@ -1423,26 +1953,9 @@ function autoMinimums(
     } else {
       // its height, or where it has one of its own and its content comes to
       // less, its content's: the lesser of the two (4.5)
-      let content = read;
-      if (!Number.isNaN(content)) {
-        // read before
-      } else if (box.kind === 'replaced') content = laid.height;
-      else if (style.height !== AUTO && percentHeightsIn(box)) {
-        // what its content comes to where it has no height to take
-        // percentages of, as an intrinsic size is measured: laid out so
-        // apart, and the final pass lays it out again
-        FLEXED_HEIGHT.set(box, NaN);
-        try {
-          ctx.layoutSubtree(box, width, containingWidth);
-        } finally {
-          FLEXED_HEIGHT.delete(box);
-        }
-        content = ratioContent(box, contentBottom(box) + box.verticalExtra);
-        laid.width = NaN;
-      } else {
-        content = ratioContent(box, contentBottom(box) + box.verticalExtra);
-        remember(box, ctx, width, containingWidth, 'content', content);
-      }
+      let content = Number.isNaN(read)
+        ? columnContent(box, ctx, laid, width, containingWidth)
+        : read;
       // within what the ratio makes of its least and greatest widths
       if (box.kind !== 'replaced') {
         content = transferredHeight(box, content, containingWidth);
@@ -1461,6 +1974,58 @@ function autoMinimums(
   return changed;
 }
 
+/**
+ * How far down a column item's content comes at a border-box width, its
+ * border box's, from the layout its content's own height makes of it
+ * there (`layoutNaturally`), which it has: what a height of its own has no
+ * say in, which its automatic minimum reads (CSS Flexbox 4.5), and a flex
+ * basis of `content` (9.2.3, E).
+ */
+function columnContent(
+  box: Box,
+  ctx: LayoutContext,
+  laid: Laid,
+  width: number,
+  containingWidth: number,
+): number {
+  if (box.kind === 'replaced') return laid.height;
+  if (box.style.height !== AUTO && percentHeightsIn(box)) {
+    // what its content comes to where it has no height to take
+    // percentages of, as an intrinsic size is measured: laid out so
+    // apart, and the final pass lays it out again
+    FLEXED_HEIGHT.set(box, NaN);
+    try {
+      ctx.layoutSubtree(box, width, containingWidth);
+    } finally {
+      FLEXED_HEIGHT.delete(box);
+    }
+    laid.width = NaN;
+    return ratioContent(box, contentBottom(box) + box.verticalExtra);
+  }
+  const content = ratioContent(box, contentBottom(box) + box.verticalExtra);
+  remember(box, ctx, width, containingWidth, 'content', content);
+  return content;
+}
+
+/** A table item's rows and captions at a border-box width, its border box's
+ *  height apart from one it sets (`TABLE_CONTENT`): read from its layout
+ *  there, which it is given where it has another, and kept for the pass. */
+function tableContent(
+  box: Box,
+  ctx: LayoutContext,
+  width: number,
+  containing: number,
+  laid: Laid,
+): number {
+  const kept = keptNatural(box, ctx, width, containing);
+  if (kept !== null && !Number.isNaN(kept.content)) return kept.content;
+  // where the box has that layout still, it is put back and not made again
+  layoutNaturally(box, ctx, width, containing, laid);
+  const content = TABLE_CONTENT.get(box) ?? box.height;
+  remember(box, ctx, width, containing, 'content', content);
+  return content;
+}
+
 /** A laid-out item's content height, its border box's: no less than its
  *  width through its ratio, height of its own or not (CSS Sizing 4, 5.1). */
 function ratioContent(box: Box, content: number): number {
@@ -1517,10 +2082,13 @@ function holdAt(
   least: number,
   hold: Hold,
 ): void {
-  if (row) node.setMinWidth(least);
-  else node.setMinHeight(least);
+  if (row) {
+    node.setMinWidth(least);
+    laid.narrowest = least;
+  } else node.setMinHeight(least);
   if (!hold.frozen) return;
   laid.auto = true;
+  laid.minimum = least;
   freezeAt(node, laid, row, least, hold);
 }
 
@@ -1541,134 +2109,725 @@ function freezeAt(
   else node.setHeight(size);
 }
 
+/** The one line of a flex box that does not wrap, as it is shared out here
+ *  (`resolveLine`). */
+interface FlexLine {
+  /** Whether its items are frozen at the sizes 9.7 shares it out to. */
+  resolved: boolean;
+  /** Its size along the main axis, where the box has one: its content
+   *  box's width along a row, its height down a column of a height. NaN
+   *  down a column that is as tall as its items make it, within limits. */
+  size: number;
+  /** Those limits, the least and the most its content box may be tall. */
+  floor: number;
+  ceiling: number;
+  /** What is between the items' border boxes along it: the gaps, and
+   *  their margins, an `auto` one none (8.1). */
+  between: number;
+  /**
+   * Whether it is a row laid out in no room at all — how the box's
+   * min-content width is measured (`MIN_CONTENT_PROBE`), where what an
+   * item contributes to that is its min-content width and not a share of
+   * a line. An item whose flex base size is its content's is taken there
+   * at the size Yoga took, its content fitted to no room, and not at its
+   * max-content width (`Laid.fitted`): a `flex: none` box of two floats
+   * counted at its widest made a `width: min-content` flex box half as
+   * wide again as Chrome has it. A row that is truly as wide as nothing is
+   * taken the same way, and is laid out as Yoga has it.
+   */
+  probe: boolean;
+}
+
+/** What is between the border boxes of a line's items along the main
+ *  axis: the gaps, and their margins, an `auto` one none — which is what
+ *  it is while the line is shared out (CSS Flexbox 9.7, 8.1). */
+function betweenOf(
+  items: readonly { box: Box }[],
+  row: boolean,
+  gap: number,
+): number {
+  let between = gap * Math.max(0, items.length - 1);
+  for (const { box } of items) {
+    const style = box.style;
+    if (row) {
+      if (style.marginLeft !== AUTO) between += box.marginLeft;
+      if (style.marginRight !== AUTO) between += box.marginRight;
+    } else {
+      if (style.marginTop !== AUTO) between += box.marginTop;
+      if (style.marginBottom !== AUTO) between += box.marginBottom;
+    }
+  }
+  return between;
+}
+
 /**
- * Put right the one line of a box that does not wrap, where every item of
- * it that may shrink is stopped by its minimum and Yoga made them wider for
- * it; whether Yoga was asked again. The line is laid out with each of them
- * frozen at its minimum, which is where CSS Flexbox leaves them (9.7, step
- * 4): the line is short of room with every one of them as small as it
- * goes.
+ * Share out the one line of a box that does not wrap as CSS Flexbox 9.7
+ * does, where Yoga's answer for it may not be that, and freeze every item
+ * at the size it comes to; whether Yoga was asked again.
+ *
+ * Yoga 3.2.1 shares a line out in two passes where 9.7 goes round until
+ * no item's limit stops it, and each pass has its own way of coming out
+ * elsewhere:
  *
- * Yoga shares what a line is short of in two passes. The first takes each
- * item a minimum stops out of the sum of the scaled shrink factors, one
- * subtraction an item, and the second divides what the line is still short
- * of by what is left of the sum. With every item stopped that is nothing:
- * `(a + b) - a - b`, in float32s, which is 0 for some sizes and a rounding
- * either side of it for others, 2^-18 for sizes about a hundred. Yoga
- * 3.2.1 tests for 0, and the guard it has had since, a sum under 1e-6, is
- * under that rounding (react/yoga#1665, #1974). A negative rounding sends
- * every item under its minimum, which stops it, and a positive one makes
- * each of them wider by billions of pixels: `width: 110.992px; min-width:
- * 110.992px` beside `62.705625px` of the same, in a row 50 wide, were
- * 3599091712 and 2033329408 wide, where 100 and 60 were as they are. So
- * were two items with no minimum but their padding, and two with
- * `min-width: 0` beside one that does not shrink and is wider than the row
- * alone.
+ * - the first takes each item a limit stops out of the sum of the flex
+ *   factors as it goes, and divides what the line is short of by that
+ *   running sum, but takes the item's size off what the line is short of
+ *   only once it has been round them all (react/yoga#2006, put right on
+ *   Yoga's `main` behind an errata bit and in no release). Every item
+ *   after the first one stopped is shrunk too far for it, and may be
+ *   stopped too: `width: 100px` three times with `min-width` 95px, 45px
+ *   and 0 in a row of 150 was 100, 100 and 100 wide, and overflowed it,
+ *   where 9.7 has 95, 45 and 10 — with every item stopped, the line was
+ *   left no shorter than it started, and the second pass shared out
+ *   nothing. Where what is left of the sum is a float's rounding of
+ *   nothing, the second pass divided by that, and each item came out
+ *   billions of pixels wide, or none;
+ * - it weighs an item's share of a shortfall by its flex base size where
+ *   the item is stopped by a limit before it is shrunk, and adds it to the
+ *   sum at its size within the limit, or the other way round: `width:
+ *   200px; max-width: 110.992px` beside `200px` within `62.706px`, each
+ *   with a `min-width`, in a row of 50 were 76.67 and 43.31, where 9.7
+ *   shrinks both from 200 and has them at their minimums;
+ * - and with no limit at work, it weighs that share by the flex base size,
+ *   its border box's, where 9.7 weighs it by the inner flex base size, its
+ *   content box's (step 4c), so an item gives up more the more padding
+ *   and borders it has (`weighsPadding`);
+ * - a limit that is more than the flex base size stops the item before
+ *   any sharing out, and Yoga shares out from there: `flex: 1;
+ *   min-width: 200px` beside a `flex: 1` in a row of 600 was 400 and
+ *   200, where each grows from 0 and is 300;
+ * - where the shrink factors come to less than 1, the line keeps that
+ *   part of what it is short of (9.7, step 4b), and Yoga shares all of it
+ *   out: a `flex-shrink: 0.5` alone was as wide as its row, where it
+ *   keeps half of what it overflows by.
  *
- * A minimum of the item's own is Yoga's to hold it to, so this looks at
- * its answer, for a line that is two things at once. It is short of room
- * with every item that may shrink at its minimum — where 9.7 leaves each
- * of them at that, whatever their sizes. And one of them is wider than its
- * hypothetical size (9.7, step 2), which no sharing out of what a line is
- * short of makes an item: Yoga is asked for the line with nothing
- * shrinking, where each item is that size. Any other line is put back as
- * it was, the two layouts that took being the cost of one that is short of
- * room at its minimums and was not shared out to them; a line with room
- * for its minimums, or one whose every item sits at its own, has cost the
- * sum of its sizes.
+ * Which is why a line is looked at only where Yoga's answer shows one of
+ * these could be at work (`unshared`), and else left as it is: a line
+ * none of whose items is stopped, that has been shared out, whose items'
+ * limits do not clamp their flex base sizes, whose shrink factors come to
+ * 1 or more, and which is not short of room with padding and borders more
+ * of one item's flex base size than of another's is shared out by Yoga as
+ * by 9.7.
  *
- * An automatic minimum is no part of it: an item held at one is frozen
- * already (`holdAt`), and one not yet held has no minimum to Yoga but its
- * padding and border, where this leaves it for `autoMinimums` to find
- * short of its content.
+ * Each item's flex base size is what its style says it is, or its
+ * content's size as the measure function found it (`Laid.sized`), and
+ * where neither is known, Yoga is asked for the line with no limits and
+ * nothing flexing, where each item is that size (`askBases`). An item held
+ * at its automatic minimum is frozen there already (`holdAt`), and the
+ * rest are shared out around it.
  */
-function stoppedLine(
+function resolveLine(
   items: readonly { box: Box; node: YogaNode; laid: Laid }[],
   row: boolean,
-  /** The flex box's size along the main axis. */
+  line: FlexLine,
+  /** The size along the main axis Yoga laid the line out in. */
   room: number,
-  /** The gap between two items. */
-  gap: number,
   hold: Hold,
   /** Lay the flex box out, as its nodes now are. */
   ask: () => void,
 ): boolean {
-  // what is between the items' border boxes: the gaps, and their margins
-  let between = gap * (items.length - 1);
-  // the line's size with each item that may shrink at its minimum
-  let least = 0;
+  if (!unshared(items, row, room - line.between, line.probe)) return false;
+  let unknown = false;
+  for (const { box, laid } of items) {
+    laid.base = baseOf(box, laid, row, line.probe);
+    if (Number.isNaN(laid.base) && Number.isNaN(laid.held)) unknown = true;
+  }
+  if (unknown) askBases(items, row, ask);
+  const sizes = shareLine(items, row, line);
+  if (items.every(({ laid }, i) => Math.abs(sizes[i] - laid.main) <= NEAR)) {
+    // Yoga's answer, which asking for the bases has to be put back to
+    if (unknown) ask();
+    return unknown;
+  }
+  line.resolved = true;
+  freezeLine(items, row, sizes, hold);
+  ask();
+  return true;
+}
+
+/** Freeze each item of a line at the size it was shared out to, but for
+ *  one held at its automatic minimum whose flex base size is not known,
+ *  which is frozen there already. */
+function freezeLine(
+  items: readonly { node: YogaNode; laid: Laid }[],
+  row: boolean,
+  sizes: readonly number[],
+  hold: Hold,
+): void {
+  items.forEach(({ node, laid }, i) => {
+    if (Number.isNaN(laid.base)) return;
+    freezeAt(node, laid, row, sizes[i], hold);
+    // its content's size, where that is what it came to (`Laid.auto`)
+    laid.auto = sizes[i] <= laid.minimum + NEAR;
+  });
+}
+
+/** How near to its room a line may be and have room to spare
+ *  (`cappedLines`). */
+const SHORT = 0.001;
+
+/** Share a line this engine has shared out again from its items' flex base
+ *  sizes, and freeze each item at its size: where one is since held at its
+ *  content's size, the rest of the line is shared out around it. */
+function shareOut(
+  items: readonly { box: Box; node: YogaNode; laid: Laid }[],
+  row: boolean,
+  line: FlexLine,
+  hold: Hold,
+): void {
+  const sizes = shareLine(items, row, line);
+  freezeLine(items, row, sizes, hold);
+}
+
+/** Each item's size along the main axis as 9.7 shares the line out from
+ *  their flex base sizes (`Laid.base`); one held at its automatic minimum
+ *  is frozen there. */
+function shareLine(
+  items: readonly { box: Box; laid: Laid }[],
+  row: boolean,
+  line: FlexLine,
+): number[] {
+  const flexing: Flexing[] = items.map(({ box, laid }) => {
+    // an automatic minimum it is held to is its minimum, which 9.7 freezes
+    // it at where the line shares out less to it — and not before, which
+    // would leave it out of the free space the line started with (4b)
+    let least = leastOf(box, laid, row);
+    if (!Number.isNaN(laid.minimum)) least = Math.max(least, laid.minimum);
+    return {
+      base: laid.base,
+      least,
+      most: Math.max(mostOf(box, laid, row), least),
+      extra: row ? box.horizontalExtra : box.verticalExtra,
+      grow: box.style.flexGrow,
+      shrink: box.style.flexShrink,
+      frozen: Number.isNaN(laid.base) ? laid.held : NaN,
+    };
+  });
+  let room = line.size;
+  if (Number.isNaN(room)) {
+    // down a column that is as tall as its items, within its limits: the
+    // sum of their hypothetical sizes (9.9.1)
+    room = line.between;
+    for (const item of flexing) room += hypotheticalOf(item);
+    room = Math.max(line.floor, Math.min(line.ceiling, room));
+  }
+  return resolveLengths(flexing, room - line.between);
+}
+
+/**
+ * Whether Yoga's answer for the one line of a box that does not wrap may
+ * not be what CSS Flexbox 9.7 makes of it (`resolveLine`): where an item
+ * has a limit of its own along the main axis, which 9.7 is then asked —
+ * sums of numbers, where each item's flex base size is known — and where
+ * none has, what shows in Yoga's answer: an item a limit stopped as the
+ * line was shared out, which with none of its own is its padding and
+ * borders, a line not shared out while an item may yet flex the way it is
+ * out, or flex factors that come to less than 1, which Yoga shares out as
+ * though they came to 1 — or, for one item that may grow and shrink, from
+ * a flex basis of nothing.
+ */
+function unshared(
+  items: readonly { box: Box; laid: Laid }[],
+  row: boolean,
+  /** The room for the items' border boxes. */
+  room: number,
+  /** Whether the line is a min-content probe's (`FlexLine.probe`). */
+  probe: boolean,
+): boolean {
+  let sum = 0;
+  for (const { laid } of items) sum += laid.main;
+  const over = sum > room + NEAR;
+  const under = sum < room - NEAR;
+  let grows = 0;
+  let shrinks = 0;
+  let growable = false;
+  for (const { box, laid } of items) {
+    // held at its content's size, and frozen (`holdAt`)
+    if (!Number.isNaN(laid.held)) continue;
+    if (!Number.isNaN(laid.least) || !Number.isNaN(laid.most)) return true;
+    const { flexGrow: grow, flexShrink: shrink } = box.style;
+    const least = leastOf(box, laid, row);
+    const base = baseOf(box, laid, row, probe);
+    const size = laid.main;
+    grows += grow;
+    shrinks += shrink;
+    // stopped by its padding where it was shrunk to it, and not where it
+    // is that size unflexed
+    if (
+      shrink > 0 &&
+      !under &&
+      size <= least + NEAR &&
+      !(base <= size + NEAR)
+    ) {
+      return true;
+    }
+    if (over && shrink > 0 && size > least + NEAR) return true;
+    if (under && grow > 0) growable = true;
+  }
+  return (
+    (growable && grows >= 1) ||
+    (!under && shrinks > 0 && shrinks < 1) ||
+    (!over && grows > 0 && grows < 1) ||
+    (!under && weighsPadding(items, row, room, probe))
+  );
+}
+
+/**
+ * Whether Yoga may have shared out what a line is short of by its items'
+ * padding and borders, where 9.7 leaves them out: Yoga weighs an item's
+ * share by its flex shrink factor times its flex base size, its border
+ * box's, and 9.7 by the factor times its inner flex base size, its content
+ * box's (step 4c). The two are the same shares where padding and borders
+ * are the same part of the flex base size of every item that shrinks —
+ * none of it, most often — and else Yoga takes more from an item the more
+ * of them it has: `width: 100px; padding-left: 50px` beside `width: 100px`
+ * in a row of 150 was 90 and 60 wide, where each gives up 50 of its
+ * content and is 100 and 50. Where an item's flex base size is not known,
+ * its padding may be any part of it, and the line is looked at.
+ */
+function weighsPadding(
+  items: readonly { box: Box; laid: Laid }[],
+  row: boolean,
+  /** The room for the items' border boxes. */
+  room: number,
+  probe: boolean,
+): boolean {
+  let sum = 0;
   let shrinking = 0;
-  let over = false;
+  let padded = false;
+  let unknown = false;
+  // the part of the first flex base size that shrinks that is padding and
+  // borders, and whether that of another is not the same
+  let part = NaN;
+  let uneven = false;
   for (const { box, laid } of items) {
-    const style = box.style;
-    // an `auto` margin is none on a line with no room (8.1)
+    if (!Number.isNaN(laid.held)) {
+      sum += laid.held;
+      continue;
+    }
+    const base = baseOf(box, laid, row, probe);
+    if (Number.isNaN(base)) unknown = true;
+    else sum += base;
+    if (!(box.style.flexShrink > 0)) continue;
+    shrinking += 1;
+    const extra = row ? box.horizontalExtra : box.verticalExtra;
+    if (extra > 0) padded = true;
+    if (Number.isNaN(base)) continue;
+    const of = base > 0 ? extra / base : 0;
+    if (Number.isNaN(part)) part = of;
+    else if (Math.abs(of - part) > 1e-9) uneven = true;
+  }
+  if (shrinking < 2 || !padded) return false;
+  return unknown || (uneven && sum > room + NEAR);
+}
+
+/** How near two sizes along the main axis are the same, as Yoga's float32s
+ *  have them. */
+const NEAR = 0.01;
+
+/** An item's flex base size, its border box's, where this engine knows it:
+ *  what its style says, or its content's size as last measured — fitted
+ *  to no room, in a min-content probe (`FlexLine.probe`) — and no less than
+ *  its padding and borders, as Yoga has it. Else NaN. */
+function baseOf(box: Box, laid: Laid, row: boolean, probe: boolean): number {
+  const extra = row ? box.horizontalExtra : box.verticalExtra;
+  const content = probe ? laid.fitted : laid.content;
+  return Math.max(laid.sized ? content : laid.basis, extra);
+}
+
+/**
+ * Give each item that is not frozen the flex base size Yoga makes of it,
+ * where this engine does not know it (`baseOf`): the line laid out with no
+ * limit on any of them along the main axis and none of them flexing, where
+ * each is that size. Their limits and flex factors are put back after.
+ */
+function askBases(
+  items: readonly { box: Box; node: YogaNode; laid: Laid }[],
+  row: boolean,
+  ask: () => void,
+): void {
+  const open = items.filter(({ laid }) => Number.isNaN(laid.held));
+  for (const { node } of open) {
     if (row) {
-      if (style.marginLeft !== AUTO) between += box.marginLeft;
-      if (style.marginRight !== AUTO) between += box.marginRight;
+      node.setMinWidth(Number.NaN);
+      node.setMaxWidth(Number.NaN);
     } else {
-      if (style.marginTop !== AUTO) between += box.marginTop;
-      if (style.marginBottom !== AUTO) between += box.marginBottom;
+      node.setMinHeight(Number.NaN);
+      node.setMaxHeight(Number.NaN);
+    }
+    node.setFlexGrow(0);
+    node.setFlexShrink(0);
+  }
+  ask();
+  for (const { box, node, laid } of open) {
+    if (Number.isNaN(laid.base)) {
+      laid.base = row ? node.getComputedWidth() : node.getComputedHeight();
+    }
+    if (!Number.isNaN(laid.least)) {
+      if (row) node.setMinWidth(laid.least);
+      else node.setMinHeight(laid.least);
+    }
+    if (!Number.isNaN(laid.most)) {
+      if (row) node.setMaxWidth(laid.most);
+      else node.setMaxHeight(laid.most);
+    }
+    node.setFlexGrow(box.style.flexGrow);
+    node.setFlexShrink(box.style.flexShrink);
+  }
+}
+
+/** An item as its line is shared out (`resolveLengths`), each size its
+ *  border box's along the main axis. */
+interface Flexing {
+  base: number;
+  /** Its least size, no less than `extra`, and its most, no less than
+   *  that. */
+  least: number;
+  most: number;
+  /** Its padding and borders. */
+  extra: number;
+  grow: number;
+  shrink: number;
+  /** The size it is frozen at from the start, or NaN. */
+  frozen: number;
+}
+
+/** An item's hypothetical main size: its flex base size within its limits
+ *  (CSS Flexbox 9.2, step 3), or where it is frozen, that size. */
+function hypotheticalOf(item: Flexing): number {
+  return Number.isNaN(item.frozen)
+    ? Math.max(item.least, Math.min(item.most, item.base))
+    : item.frozen;
+}
+
+/**
+ * Resolve the flexible lengths of a line (CSS Flexbox 9.7): each item's
+ * size along the main axis, sharing out the room its border boxes have
+ * from their flex base sizes, and going round again with each item a limit
+ * stops frozen at it until none is — the minimums where the line is short
+ * of more than the maximums give back, and the other way round.
+ */
+function resolveLengths(line: readonly Flexing[], room: number): number[] {
+  const count = line.length;
+  const size = line.map(hypotheticalOf);
+  let sum = 0;
+  for (const s of size) sum += s;
+  // step 1: grow where the line has room at the items' hypothetical sizes
+  const grow = sum < room;
+  // step 2: an item that does not flex, or would flex away from its limit,
+  // is frozen at its hypothetical size — a flex base size Yoga worked out
+  // being as near to that as its float32s come, and no further
+  const frozen = line.map(
+    (item, i) =>
+      !Number.isNaN(item.frozen) ||
+      (grow ? item.grow : item.shrink) === 0 ||
+      (grow ? item.base > size[i] + NEAR : item.base < size[i] - NEAR),
+  );
+  const free = (): number => {
+    let left = room;
+    for (let i = 0; i < count; i++) left -= frozen[i] ? size[i] : line[i].base;
+    return left;
+  };
+  // step 3
+  const initial = free();
+  const off = new Array<number>(count).fill(0);
+  for (;;) {
+    // step 4a
+    let factors = 0;
+    let open = false;
+    for (let i = 0; i < count; i++) {
+      if (frozen[i]) continue;
+      open = true;
+      factors += grow ? line[i].grow : line[i].shrink;
+    }
+    if (!open) break;
+    // 4b: flex factors that come to less than 1 share out that part of the
+    // free space the line started with
+    let left = free();
+    if (factors < 1) {
+      const part = initial * factors;
+      if (Math.abs(part) < Math.abs(left)) left = part;
+    }
+    // 4c: shared by the grow factors, or by the shrink factors each times
+    // the item's inner flex base size
+    let scaled = 0;
+    if (!grow) {
+      for (let i = 0; i < count; i++) {
+        if (!frozen[i])
+          scaled += line[i].shrink * (line[i].base - line[i].extra);
+      }
+    }
+    // 4d: each within its limits, and how far that took it
+    let violation = 0;
+    for (let i = 0; i < count; i++) {
+      if (frozen[i]) continue;
+      const item = line[i];
+      let target = item.base;
+      if (grow) target += (left * item.grow) / factors;
+      else if (scaled > 0) {
+        target -=
+          (Math.abs(left) * item.shrink * (item.base - item.extra)) / scaled;
+      }
+      size[i] = Math.max(item.least, Math.min(item.most, target));
+      off[i] = size[i] - target;
+      violation += off[i];
     }
-    if (!shrinks(box, laid)) least += laid.main;
-    else {
-      const min = leastOf(box, laid, row);
-      shrinking += 1;
-      least += min;
-      if (laid.main > min + 0.01) over = true;
+    // 4e: freeze those stopped the way most of them were, or all of them
+    for (let i = 0; i < count; i++) {
+      if (frozen[i]) continue;
+      if (violation === 0 || (violation > 0 ? off[i] > 0 : off[i] < 0)) {
+        frozen[i] = true;
+      }
     }
   }
-  // two at the least: what is left of a sum of one, less it, is 0 exactly.
-  // A line within a thousandth of a pixel of room is short of it: what
-  // Yoga makes of that is as far out, and the minimums are that near
-  if (shrinking < 2 || !over || !(between + least > room - SHORT)) {
+  return size;
+}
+
+/** The least an item may be along the main axis, its border box: the
+ *  minimum of its own, and no less than its padding and borders. */
+function leastOf(box: Box, laid: Laid, row: boolean): number {
+  const extra = row ? box.horizontalExtra : box.verticalExtra;
+  return Number.isNaN(laid.least) ? extra : Math.max(laid.least, extra);
+}
+
+/**
+ * Put right the lines of a flex box that wraps on which every item that
+ * may grow is stopped by its maximum and Yoga made them smaller for it;
+ * whether Yoga was asked again. The one line of a box that does not wrap
+ * is shared out by 9.7 here where Yoga's answer may not be its
+ * (`resolveLine`), which puts right this and more. Each such line is laid out with every item of it that
+ * may grow frozen at its maximum, which is where CSS Flexbox leaves them
+ * (9.7, step 4): the line has room left over with every one of them as
+ * large as it goes. It is also where Yoga leaves them itself, where its
+ * rounding is not below 0.
+ *
+ * It is a float's rounding of nothing. Yoga's first pass takes
+ * each item its maximum stops out of the sum of the grow factors, and the
+ * second divides the room still left by what is left of the sum: with
+ * every item stopped, `(a + b + c) - a - b - c` in float32s. Where that is
+ * 0, or a rounding above it, the quotient is vast and each item is held to
+ * its maximum, which is right; where it is a rounding below, each is held
+ * to its minimum. Three items of `flex-grow: 3.361`, `2.417` and `1.988`,
+ * each `max-width: 10px`, in a row 100 wide came out nothing wide, as a
+ * third of such lines of random factors do. Sums of whole numbers, and of
+ * halves and quarters of them, are exact, so a box whose factors are those
+ * is not looked at (`exactSums`).
+ *
+ * What makes a line one to put right is Yoga's answer. Every item of
+ * the line that may grow has a
+ * maximum, and the line has room to spare with each of them at it. And
+ * one of them came out short of its maximum and no larger than its
+ * hypothetical size (9.7, step 2), which Yoga, sharing out room, makes no
+ * item: Yoga is asked for the line with nothing growing, where each item
+ * is that size. No larger rather than smaller, because an item held to
+ * its minimum is often that size: an empty one is nothing wide either
+ * way. Any other line is put back as it was, and the two layouts that
+ * took are the cost of a box with a factor that is not a whole number and
+ * an item short of its maximum; any other box has cost a sum.
+ *
+ * A few of the lines put right are still not a browser's. Once
+ * some of its items are frozen, 9.7 shares out to the rest only the part
+ * of the room their factors come to, where that is less than 1 (step 4,
+ * b), and Yoga has no such rule: an item of `flex-grow: 0.1` left alone
+ * on a line is at its maximum here, as Yoga would have had it, and a
+ * tenth of the room in Chrome.
+ *
+ * A box that wraps has lines like it: the last line of a grid of cards
+ * with a `max-width` has room for every card it has. Yoga breaks lines by
+ * its items' hypothetical sizes, which the layout with nothing growing
+ * gives, and they are broken here as it breaks them (`linesOf`). Freezing
+ * a line's items at their maximums moves no break: the line has room for
+ * every item on it at that size, so it keeps them all, and the item after
+ * it, which did not fit with them smaller, fits no better with them larger.
+ * But Yoga holds a size to an item's maximum before its minimum, so where
+ * the maximum is the smaller — or smaller than the item's padding and
+ * borders — it breaks a line by one size and lays the item out at another:
+ * `max-width: 2px; min-width: 10px` is 10 wide, on a line it was put on
+ * as 2. A box that wraps with an item like that is left as Yoga had it.
+ */
+function cappedLines(
+  items: readonly { box: Box; node: YogaNode; laid: Laid }[],
+  row: boolean,
+  /** The flex box's size along the main axis. */
+  room: number,
+  /** The size Yoga breaks lines at: the flex box's where it wraps and has
+   *  one, and else Infinity, for the one line. */
+  breaks: number,
+  /** The gap between two items. */
+  gap: number,
+  hold: Hold,
+  /** Lay the flex box out, as its nodes now are. */
+  ask: () => void,
+): boolean {
+  // two at the least: what is left of a sum of one, less it, is 0 exactly
+  const growing = items.filter(({ box, laid }) => grows(box, laid));
+  if (growing.length < 2 || exactSums(growing)) return false;
+  // one short of its maximum, as each on such a line is
+  const short = growing.some(
+    ({ box, laid }) => laid.main < mostOf(box, laid, row) - 0.01,
+  );
+  if (!short) return false;
+  if (breaks === Infinity) {
+    // and on the one line, every one of them with a maximum, and room left
+    // over as Yoga has it
+    let used = gap * (items.length - 1);
+    for (const { box, laid } of items) used += laid.main + marginsOf(box, row);
+    const capped = growing.every(({ box, laid }) => !Number.isNaN(laid.most));
+    if (!capped || !(used < room - SHORT)) return false;
+  } else if (
+    // and on lines broken where the layout says, with no item that Yoga
+    // breaks a line by at another size
+    items.some(({ box, laid }) => laid.most < leastOf(box, laid, row))
+  ) {
     return false;
   }
 
-  const stopped = items.filter(({ box, laid }) => shrinks(box, laid));
-  for (const { node } of stopped) node.setFlexShrink(0);
+  const flexible = items.filter(({ laid }) => Number.isNaN(laid.held));
+  for (const { node } of flexible) {
+    node.setFlexGrow(0);
+    node.setFlexShrink(0);
+  }
   ask();
-  // each item its hypothetical size, which one that does not shrink is on
-  // a line short of room — where Yoga may have grown it, on a line it took
-  // for having some
-  let wider = false;
-  least = 0;
-  for (const { box, node, laid } of items) {
-    const hypothetical = row
-      ? node.getComputedWidth()
-      : node.getComputedHeight();
-    if (!shrinks(box, laid)) least += hypothetical;
-    else {
-      least += leastOf(box, laid, row);
-      if (laid.main > hypothetical && !nearly(laid.main, hypothetical)) {
-        wider = true;
+  // each item its hypothetical size, on every line
+  const hypothetical = items.map(({ node, laid }) =>
+    row ? node.getComputedWidth() : heightOf(node, laid),
+  );
+  const frozen = new Set<Box>();
+  for (const line of linesOf(items, hypothetical, row, breaks, gap)) {
+    const growers = line.filter((i) => grows(items[i].box, items[i].laid));
+    if (growers.length < 2) continue;
+    // the line with each item that may grow at its maximum: Infinity where
+    // one has none
+    let size = gap * (line.length - 1);
+    let smaller = false;
+    for (const i of line) {
+      const { box, laid } = items[i];
+      size += marginsOf(box, row);
+      if (!grows(box, laid)) {
+        size += hypothetical[i];
+        continue;
+      }
+      const most = mostOf(box, laid, row);
+      size += most;
+      if (
+        laid.main < most - 0.01 &&
+        (laid.main < hypothetical[i] || nearly(laid.main, hypothetical[i]))
+      ) {
+        smaller = true;
       }
     }
+    if (!smaller || !(size < room - SHORT)) continue;
+    for (const i of growers) frozen.add(items[i].box);
   }
-  const freeze = wider && between + least > room - SHORT;
-  for (const { box, node, laid } of stopped) {
-    if (freeze) freezeAt(node, laid, row, leastOf(box, laid, row), hold);
-    else node.setFlexShrink(box.style.flexShrink);
+  for (const { box, node, laid } of flexible) {
+    if (frozen.has(box)) {
+      freezeAt(node, laid, row, mostOf(box, laid, row), hold);
+    } else {
+      node.setFlexGrow(box.style.flexGrow);
+      node.setFlexShrink(box.style.flexShrink);
+    }
   }
   ask();
   return true;
 }
 
-/** Whether Yoga may shrink an item: it has a shrink factor, and is not
- *  frozen (`freezeAt`). */
-function shrinks(box: Box, laid: Laid): boolean {
-  return box.style.flexShrink > 0 && Number.isNaN(laid.held);
+/**
+ * The lines Yoga breaks a flex box's items into, as indices of them. A line
+ * takes items while their hypothetical sizes, their margins and the gaps
+ * between them come to no more than the size it breaks at, and always
+ * takes one — added up in float32s, in the order Yoga adds them, so that an
+ * item that fits exactly is on the line it is on in Yoga's.
+ */
+function linesOf(
+  items: readonly { box: Box }[],
+  /** Each item's hypothetical size along the main axis. */
+  sizes: readonly number[],
+  row: boolean,
+  breaks: number,
+  gap: number,
+): number[][] {
+  if (breaks === Infinity) return [items.map((_, i) => i)];
+  const f = Math.fround;
+  const limit = f(breaks);
+  const lines: number[][] = [];
+  let line: number[] = [];
+  let used = 0;
+  items.forEach(({ box }, i) => {
+    const size = f(sizes[i]);
+    const style = box.style;
+    const [start, end] = row
+      ? [style.marginLeft, style.marginRight]
+      : [style.marginTop, style.marginBottom];
+    const margin = f(
+      (start === AUTO ? 0 : f(row ? box.marginLeft : box.marginTop)) +
+        (end === AUTO ? 0 : f(row ? box.marginRight : box.marginBottom)),
+    );
+    let lead = line.length ? f(gap) : 0;
+    if (line.length && f(f(f(used + size) + margin) + lead) > limit) {
+      lines.push(line);
+      line = [];
+      used = 0;
+      lead = 0;
+    }
+    used = f(used + f(f(size + margin) + lead));
+    line.push(i);
+  });
+  lines.push(line);
+  return lines;
 }
 
-/** How near to its room a line may be and be short of it (`stoppedLine`). */
-const SHORT = 0.001;
+/** Whether Yoga may grow an item: it has a grow factor, and is not frozen
+ *  (`freezeAt`). */
+function grows(box: Box, laid: Laid): boolean {
+  return box.style.flexGrow > 0 && Number.isNaN(laid.held);
+}
 
-/** The least an item may be along the main axis, its border box: the
- *  minimum of its own, and no less than its padding and borders. */
-function leastOf(box: Box, laid: Laid, row: boolean): number {
-  const extra = row ? box.horizontalExtra : box.verticalExtra;
-  return Number.isNaN(laid.least) ? extra : Math.max(laid.least, extra);
+/** The most an item may be along the main axis, its border box: the
+ *  maximum of its own, where it has one, and no less than its least size;
+ *  Infinity where it has none. */
+function mostOf(box: Box, laid: Laid, row: boolean): number {
+  if (Number.isNaN(laid.most)) return Infinity;
+  return Math.max(laid.most, leastOf(box, laid, row));
 }
 
+/** An item's margins along the main axis, where they are not `auto`: an
+ *  `auto` margin is none to the size of its line (CSS Flexbox 8.1). */
+function marginsOf(box: Box, row: boolean): number {
+  const style = box.style;
+  if (row) {
+    return (
+      (style.marginLeft === AUTO ? 0 : box.marginLeft) +
+      (style.marginRight === AUTO ? 0 : box.marginRight)
+    );
+  }
+  return (
+    (style.marginTop === AUTO ? 0 : box.marginTop) +
+    (style.marginBottom === AUTO ? 0 : box.marginBottom)
+  );
+}
+
+/**
+ * Whether Yoga's sums of these items' grow factors are exact: in float32s,
+ * as it adds them, a sum of whole numbers is, and so is one of halves and
+ * quarters of them, and what is left of it less each of its terms is then
+ * 0 exactly (`cappedLines`).
+ */
+function exactSums(items: readonly { box: Box }[]): boolean {
+  let sum = 0;
+  for (const { box } of items) {
+    const factor = box.style.flexGrow * EXACT;
+    if (!Number.isInteger(factor)) return false;
+    sum += factor;
+  }
+  // every sum along the way a whole number of the parts under a float32's
+  // 24 bits of significand
+  return sum < 2 ** 24;
+}
+
+/** The parts of one a grow factor may be a whole number of and have its
+ *  sums exact (`exactSums`). */
+const EXACT = 1024;
+
 /** An item's min-content width, its border box's, taken the once: its
  *  content's, whatever width it has of its own (`keywordWidth`'s too). */
 function minContentOf(box: Box, ctx: LayoutContext, laid: Laid): number {
@@ -1747,22 +2906,133 @@ function baselineLines<T extends { box: Box }>(
       line = [];
     }
     last = box.x;
-    const own = box.style;
-    const aligned = own.alignSelf === AUTO ? style.alignItems : own.alignSelf;
-    // an `auto` margin across the line takes it over alignment
-    if (
-      aligned === 'baseline' &&
-      own.marginTop !== AUTO &&
-      own.marginBottom !== AUTO
-    ) {
-      line.push(item);
-    }
+    if (byBaseline(style, box.style)) line.push(item);
   }
   close();
   // one alone on its line is at its start already
   return several ? out : null;
 }
 
+/** Whether an item takes part in aligning its line by baselines (CSS
+ *  Flexbox 8.3, 9.4 step 8): aligned by its baseline, with no `auto`
+ *  margin across the line, which takes it over its alignment. */
+function byBaseline(container: ComputedStyle, item: ComputedStyle): boolean {
+  const aligned =
+    item.alignSelf === AUTO ? container.alignItems : item.alignSelf;
+  return (
+    aligned === 'baseline' &&
+    item.marginTop !== AUTO &&
+    item.marginBottom !== AUTO
+  );
+}
+
+/**
+ * Whether Yoga made a line of a row that wraps the row's height, where its
+ * items make it another (CSS Flexbox 9.4, steps 7 and 8; `layoutFlex`).
+ * Where `align-content` stretches the lines, that is an item stretched
+ * across one that is shorter than its content at the width it was given:
+ * its line is as tall as that, past the box. Where it centres them or ends
+ * them, it is the one line of the row not as tall as the row, which moves
+ * it from the row's start — and so where it spaces them out around or
+ * evenly, which centres one line (CSS Box Alignment 3, 5.1). Lines it
+ * starts at the row's start are there in Yoga's layout as well, and so is
+ * the one line `space-between` starts there.
+ */
+function heldLine(
+  container: Box,
+  ctx: LayoutContext,
+  items: readonly { box: Box; node: YogaNode; laid: Laid }[],
+  /** The row's content height. */
+  height: number,
+  /** The row's content width, the items' containing block's. */
+  width: number,
+  /** The gap between two items along the row. */
+  gap: number,
+): boolean {
+  const style = container.style;
+  const lines = crossContent(style);
+  if (
+    lines !== 'stretch' &&
+    lines !== 'center' &&
+    lines !== 'flex-end' &&
+    lines !== 'space-around' &&
+    lines !== 'space-evenly'
+  ) {
+    return false;
+  }
+  const stretched = items.filter(({ box }) => stretches(box, style));
+  if (stretched.length === 0) return false;
+  if (lines === 'stretch') {
+    return stretched.some(
+      ({ box, node, laid }) =>
+        naturalAcross(box, ctx, laid, width) > heightOf(node, laid) + 0.01,
+    );
+  }
+  // one line, which the items come to no more than the row's width along:
+  // Yoga made a line each of them only where they come to more
+  let along = gap * (items.length - 1);
+  for (const { box, laid } of items) along += laid.main + marginsOf(box, true);
+  if (along > width + 0.01) return false;
+  // as tall as its tallest item, as Yoga has them: it lays them out at
+  // their content's height where `align-content` does not stretch lines
+  let line = 0;
+  for (const { box, node, laid } of items) {
+    line = Math.max(line, heightOf(node, laid) + marginsOf(box, false));
+  }
+  return Math.abs(line - height) > 0.01;
+}
+
+/**
+ * A row item's border-box height as its content makes it at the width the
+ * flex layout gave it, within its limits: the layout `placeItems` gives it
+ * there, made now where it has none (`layoutItemAt`), and a replaced one's
+ * through its ratio or its natural height.
+ */
+function naturalAcross(
+  box: Box,
+  ctx: LayoutContext,
+  laid: Laid,
+  /** The flex box's content width, the item's containing block's. */
+  containing: number,
+): number {
+  const width = meant(laid.main, laid.set, laid.stretch, laid.width, laid.held);
+  if (box.kind === 'replaced') {
+    const own = box.intrinsic;
+    const natural =
+      heightThroughRatio(box, width) ??
+      (own && !(own.missing & 2) ? own.height + box.verticalExtra : null);
+    return natural === null ? 0 : clampHeight(box, natural);
+  }
+  if (box.kind === 'text' || box.kind === 'break') return 0;
+  const kept = naturalHeight(box, ctx, width, containing, laid);
+  if (!Number.isNaN(kept)) return kept;
+  layoutNaturally(box, ctx, width, containing, laid);
+  return box.height;
+}
+
+/**
+ * The alignment an item with an `auto` margin across a row that wraps comes
+ * to in its line (CSS Flexbox 8.1, 9.6 step 13), as Yoga is told it
+ * (`layoutFlex`): at the end where the margin at the line's cross start is
+ * `auto`, at the start where the one at its end is, and centred where both
+ * are; null where neither is. Its line's cross start is the box's bottom
+ * where its lines wrap in reverse.
+ *
+ * The line is as tall as its tallest item, margins and all, so the item
+ * comes to no more than it, and the margins take a share of no less than
+ * nothing: the alignment puts it where they would.
+ */
+function autoAcross(
+  item: ComputedStyle,
+  reverse: boolean,
+): 'flex-start' | 'flex-end' | 'center' | null {
+  const top = item.marginTop === AUTO;
+  const bottom = item.marginBottom === AUTO;
+  if (top && bottom) return 'center';
+  if (!top && !bottom) return null;
+  return top !== reverse ? 'flex-end' : 'flex-start';
+}
+
 /**
  * How far an item is from where it belongs across its line, where Yoga
  * (3.2.1) aligned the lines in the pass it takes for a box that wraps or
@@ -1771,47 +3041,349 @@ function baselineLines<T extends { box: Box }>(
  * none at either — `items-start` in a wrapping row put every card's top
  * margin under it. By the margin at the start of the line's cross axis, and
  * by half what it exceeds the one at the end by, as Yoga holds them: for an
- * item set at its line's start (`started`), its baseline's. A column's,
- * whose cross axis runs right to left, and a box that wraps in reverse are
- * left as Yoga has them.
+ * item set at its line's start (`started`), its baseline's.
+ *
+ * A row whose lines wrap in reverse Yoga lays out as though they wrapped
+ * forward, and then turns each item over across the box, its margins with
+ * it: each is where the other margin would have put it. One at its line's
+ * start, the bottom, stands on nothing; one at its end, the top, or
+ * stretched, is its bottom margin down from its line's top where it is its
+ * top one; and one centred, half the difference. A column's, whose cross
+ * axis runs right to left, or that wraps in reverse, is left as Yoga has
+ * it, and so is an item an `auto` margin aligns in a row that does not
+ * wrap: where Yoga still takes that pass for such a row, its items are
+ * laid out again without it, aligned by their baselines (`layoutFlex`).
  */
 function lineMarginFix(
   container: ComputedStyle,
   item: Box,
   node: YogaNode,
   row: boolean,
+  /** Whether the flex box has a definite height. */
+  own: boolean,
   started = false,
 ): number {
-  if (container.flexWrap === 'wrap-reverse') return 0;
-  if (!row && container.direction === 'rtl') return 0;
+  const reverse = container.flexWrap === 'wrap-reverse';
+  if (!row && (reverse || container.direction === 'rtl')) return 0;
   const style = item.style;
-  // a margin that is `auto` takes the item over its alignment
+  // a margin that is `auto` takes the item over its alignment, which Yoga
+  // is told it comes to in a row that wraps (`autoAcross`)
   const lead = row ? style.marginTop : style.marginLeft;
   const trail = row ? style.marginBottom : style.marginRight;
-  if (lead === AUTO || trail === AUTO) return 0;
-  const align = started
-    ? 'flex-start'
-    : style.alignSelf === AUTO
-      ? container.alignItems
-      : style.alignSelf;
-  if (align !== 'flex-start' && align !== 'center') return 0;
+  let align: string | null;
+  if (started) align = 'flex-start';
+  else if (lead === AUTO || trail === AUTO) {
+    align =
+      row && container.flexWrap !== 'nowrap'
+        ? autoAcross(style, reverse)
+        : null;
+  } else {
+    align = style.alignSelf === AUTO ? container.alignItems : style.alignSelf;
+    // which sets one whose height is a percentage of none at its line's
+    // start, as Yoga is told it does (`applyItem`)
+    if (align === 'stretch' && row && heightOfNone(style, own)) {
+      align = 'flex-start';
+    }
+  }
   const leading = node.getComputedMargin(row ? Y.EDGE_TOP : Y.EDGE_LEFT);
-  if (align === 'flex-start') return leading;
   const trailing = node.getComputedMargin(row ? Y.EDGE_BOTTOM : Y.EDGE_RIGHT);
-  return (leading - trailing) / 2;
+  switch (align) {
+    case 'flex-start':
+      return reverse ? -trailing : leading;
+    case 'center':
+      return (leading - trailing) / 2;
+    case 'flex-end':
+    case 'stretch':
+      return reverse ? leading - trailing : 0;
+  }
+  return 0;
 }
 
 /** An item's first baseline, down from its border edge: its content's
  *  first line's, or where it has none, or is replaced, one synthesized
- *  from its border box — its bottom edge. */
+ *  from its border box — its bottom edge. Past that edge where the line
+ *  is: only a scroll container's is held to its box (`firstBaselineIn`),
+ *  and an item shorter than its text, or whose padding puts the text
+ *  under it, sits on its text where it had sat on its bottom. */
 function itemBaseline(item: Box): number {
   if (item.kind !== 'replaced') {
     const found = firstBaselineIn(item);
-    if (found !== null) return Math.min(found - item.y, item.height);
+    if (found !== null) return found - item.y;
   }
   return item.height;
 }
 
+/**
+ * The items of a column that wraps that Yoga (3.2.1) lays out at another
+ * height than it sized them at, as it stretches them across their lines:
+ * each it aligns `stretch`, with no width of its own, whose left and right
+ * margins come to another sum than its top and bottom ones.
+ *
+ * Yoga aligns the lines of a box that wraps in a pass of its own, after it
+ * has sized and placed every item down them, and lays each item it
+ * stretches out again there at its line's width — and at its height plus
+ * the margins across the line, where it means the ones down it
+ * (CalculateLayout.cpp's multi-line `Align::Stretch`, still so on Yoga's
+ * main). A leaf laid out at a width and a height is that size, so the item
+ * came out its side margins taller and its top and bottom ones shorter
+ * than the height its line was shared out to, which its place and the
+ * next item's had been worked out from. The pass lays an item out again
+ * wherever its side margins are not nothing, or its line is another width
+ * than the one it was measured at, so `margin: 0 5px` on a line of words
+ * was 28 tall where Chrome's is 18, and `margin: 4px 0 2px` in a column
+ * with two lines 6 short; where the two sums are the same, the pass gives
+ * the height back unchanged.
+ */
+function stretchedDown(
+  root: YogaNode,
+  items: readonly { box: Box; node: YogaNode; laid: Laid }[],
+): { box: Box; node: YogaNode; laid: Laid }[] {
+  const lines = root.getAlignItems();
+  return items.filter(({ box, node }) => {
+    const own = node.getAlignSelf();
+    if ((own === Y.ALIGN_AUTO ? lines : own) !== Y.ALIGN_STRETCH) return false;
+    const width = node.getWidth().unit;
+    if (width !== Y.UNIT_AUTO && width !== Y.UNIT_UNDEFINED) return false;
+    // as Yoga adds them up, an `auto` margin as nothing
+    const style = box.style;
+    const of = (len: unknown, px: number) => (len === AUTO ? 0 : px);
+    const across =
+      of(style.marginLeft, box.marginLeft) +
+      of(style.marginRight, box.marginRight);
+    const down =
+      of(style.marginTop, box.marginTop) +
+      of(style.marginBottom, box.marginBottom);
+    return Math.abs(across - down) >= 0.0001;
+  });
+}
+
+/**
+ * Lay a column that wraps out, keeping for each item Yoga stretches across
+ * its line the height it sized it at (`stretchedDown`, `Laid.unstretched`).
+ *
+ * Yoga is asked again with each such item set at its line's start, which
+ * its multi-line pass does not lay out again: each is as tall as its line
+ * made it. Its flex base size has to come out the same for that, so its
+ * lines break and share out the same — and where Yoga hands the column's
+ * width over as a size, it measures an item it stretches at that width, and
+ * one it does not at its content's, so there the item is handed the width
+ * as its own too. Then Yoga is asked once more as it was, so the lines and
+ * the widths are its own, and only the heights are taken from the second
+ * layout. Where an item's place down its line moved between the two, a
+ * base moved too, and Yoga's height is kept, as it was.
+ */
+function unstretch(
+  items: readonly { box: Box; node: YogaNode; laid: Laid }[],
+  stretched: readonly { box: Box; node: YogaNode; laid: Laid }[],
+  /** The column's content width, where Yoga is handed it as a size, and
+   *  else null. */
+  width: number | null,
+  layout: () => void,
+): void {
+  layout();
+  const tops = items.map(({ node }) => node.getComputedTop());
+  const aligned = stretched.map(({ box, node }) => {
+    const own = node.getAlignSelf();
+    node.setAlignSelf(Y.ALIGN_FLEX_START);
+    if (width !== null) node.setWidth(measuredAcross(box, node, width));
+    return own;
+  });
+  layout();
+  const kept = items.every(
+    ({ node }, i) => Math.abs(node.getComputedTop() - tops[i]) < 0.01,
+  );
+  const heights = stretched.map(({ node }) => node.getComputedHeight());
+  stretched.forEach(({ node }, i) => {
+    node.setAlignSelf(aligned[i]);
+    if (width !== null) node.setWidthAuto();
+  });
+  layout();
+  stretched.forEach(({ laid }, i) => {
+    laid.unstretched = kept ? heights[i] : NaN;
+  });
+}
+
+/** The border-box width Yoga measures a column's item at for its flex base
+ *  size where it stretches it across a column of a width: the column's,
+ *  less its margins across, within its maximum. */
+function measuredAcross(box: Box, node: YogaNode, width: number): number {
+  const style = box.style;
+  const of = (len: unknown, px: number) => (len === AUTO ? 0 : px);
+  const across =
+    of(style.marginLeft, box.marginLeft) +
+    of(style.marginRight, box.marginRight);
+  const most = node.getMaxWidth();
+  const limit =
+    most.unit === Y.UNIT_POINT
+      ? most.value
+      : most.unit === Y.UNIT_PERCENT
+        ? (most.value / 100) * width
+        : Infinity;
+  return Math.min(width - across, limit);
+}
+
+/** An item's border-box height, as Yoga sized it: the one it had before its
+ *  line stretched it, where that laid it out at another (`unstretch`,
+ *  `unspace`). */
+function heightOf(node: YogaNode, laid: Laid): number {
+  return Number.isNaN(laid.unstretched)
+    ? node.getComputedHeight()
+    : laid.unstretched;
+}
+
+/** Whether `align-content` spaces a flex box's lines out, putting what
+ *  room it has past them between them and around them. */
+function spacesLines(style: ComputedStyle): boolean {
+  const lines = crossContent(style);
+  return (
+    lines === 'space-between' ||
+    lines === 'space-around' ||
+    lines === 'space-evenly'
+  );
+}
+
+/**
+ * Lay a row that wraps out, its lines spaced out by `align-content`,
+ * keeping each item Yoga stretches across its line as tall as the line
+ * (`Laid.unstretched`; CSS Flexbox 9.4, step 11).
+ *
+ * Yoga (3.2.1) sets the lines of a box that wraps in a pass of its own,
+ * after it has sized them, and lays each item it stretches out again there
+ * as tall as its line and the room it puts after the line as well
+ * (CalculateLayout.cpp's multi-line `Align::Stretch`, still so on Yoga's
+ * main). Each line was where it belongs, and every item on it that is not
+ * stretched, but a stretched item ran down to the next line: two lines of
+ * 18px items in a row 100 tall came to 82 apiece with `space-between`. So
+ * Yoga is asked with the lines set at the row's start, where it puts no
+ * room between them and each item is as tall as its line. Where the lines
+ * leave the row no room (`linesReach`), that is the layout the spacing
+ * makes too, and is kept. Where they do, Yoga is asked again as the row
+ * is, for where the lines and the items are, and the heights are kept from
+ * the first layout.
+ *
+ * And where the lines are taller than the row, `space-around` and
+ * `space-evenly` fall back to `safe center`, which sets them at the row's
+ * own start, its top (CSS Box Alignment 3, 4.3 and 5.1; CSS Flexbox 8.4).
+ * Yoga falls back to `flex-start` for both, which is the bottom where the
+ * lines run bottom to top, and ran them out past the row's top. It sets
+ * the lines of a row that wraps in reverse top to bottom and turns them
+ * over once they are set, so it is asked for them at `flex-end` there,
+ * which comes out at the top — where the lines it set at their start, or
+ * spaced, reach past the row's bottom.
+ */
+function unspace(
+  root: YogaNode,
+  items: readonly { box: Box; node: YogaNode; laid: Laid }[],
+  /** Whether the lines run bottom to top. */
+  reverse: boolean,
+  layout: () => void,
+): void {
+  for (const { laid } of items) laid.unstretched = NaN;
+  const lines = root.getAlignContent();
+  // where the lines start at the row's bottom, its start is their end
+  const safe =
+    reverse &&
+    (lines === Y.ALIGN_SPACE_AROUND || lines === Y.ALIGN_SPACE_EVENLY);
+  const atEnd = (): void => {
+    root.setAlignContent(Y.ALIGN_FLEX_END);
+    layout();
+    root.setAlignContent(lines);
+  };
+  // each item Yoga stretches: `stretch`, with no height of its own
+  const align = root.getAlignItems();
+  const stretched = items.filter(({ node }) => {
+    const own = node.getAlignSelf();
+    if ((own === Y.ALIGN_AUTO ? align : own) !== Y.ALIGN_STRETCH) return false;
+    const height = node.getHeight().unit;
+    return height === Y.UNIT_AUTO || height === Y.UNIT_UNDEFINED;
+  });
+  if (stretched.length === 0) {
+    layout();
+    // spaced where there is room, and else at their start, past the bottom
+    if (
+      safe &&
+      linesReach(root, items, reverse) - root.getComputedHeight() > NEAR
+    ) {
+      atEnd();
+    }
+    return;
+  }
+  root.setAlignContent(Y.ALIGN_FLEX_START);
+  layout();
+  root.setAlignContent(lines);
+  const room = root.getComputedHeight() - linesReach(root, items, reverse);
+  if (safe && room < -NEAR) {
+    atEnd();
+    return;
+  }
+  if (!(room > NEAR)) return;
+  const heights = stretched.map(({ node }) => node.getComputedHeight());
+  layout();
+  stretched.forEach(({ node, laid }, i) => {
+    if (Math.abs(node.getComputedHeight() - heights[i]) >= NEAR) {
+      laid.unstretched = heights[i];
+    }
+  });
+}
+
+/**
+ * How far down a row that wraps its lines reach, at the least, in the
+ * layout Yoga made of it with the lines at its start (`unspace`): the most,
+ * over its items, of where the item's line ends at the least. An item is as
+ * tall as its line with its margins where it is stretched across it, and
+ * no taller where it is not, and Yoga ends it at its line's end, or with
+ * its margins at the line's start, or centres it with neither
+ * (`lineMarginFix`). Read with the lines turned back the right way up where
+ * they run bottom to top.
+ */
+function linesReach(
+  root: YogaNode,
+  items: readonly { box: Box; node: YogaNode }[],
+  reverse: boolean,
+): number {
+  const height = root.getComputedHeight();
+  const lines = root.getAlignItems();
+  let reach = 0;
+  for (const { box, node } of items) {
+    const tall = node.getComputedHeight();
+    const top = reverse
+      ? height - node.getComputedTop() - tall
+      : node.getComputedTop();
+    const style = box.style;
+    const above = style.marginTop === AUTO ? 0 : box.marginTop;
+    const below = style.marginBottom === AUTO ? 0 : box.marginBottom;
+    const own = node.getAlignSelf();
+    const align = own === Y.ALIGN_AUTO ? lines : own;
+    // where Yoga set it at its line's start with no margin above it, the
+    // line runs on past it by both its margins at the least, and where it
+    // centred it, by half of them
+    const lead =
+      align === Y.ALIGN_FLEX_START
+        ? above
+        : align === Y.ALIGN_CENTER
+          ? (above - below) / 2
+          : 0;
+    reach = Math.max(reach, top + tall + below + lead);
+  }
+  return reach;
+}
+
+/**
+ * Whether a row item's height is a percentage of a height its flex box has
+ * none of. That is `auto` to the item's size (CSS 2.1 10.5), and is not
+ * handed to Yoga (`applyItem`), but it is not `auto` to its alignment:
+ * `stretch` stretches an item whose height computes to `auto` (CSS Flexbox
+ * 8.3), and this one's computes to the percentage. Such an item is as tall
+ * as its content, set at its line's start, which is what Yoga is told.
+ */
+function heightOfNone(
+  style: ComputedStyle,
+  /** Whether the flex box has a definite height. */
+  own: boolean,
+): boolean {
+  return !own && isPct(style.height);
+}
+
 /** Whether an item is stretched across its line: `stretch`, its own or its
  *  container's, with no height of its own and no `auto` margin across. */
 function stretches(
@@ -1834,6 +3406,163 @@ function stretches(
         style.marginRight !== AUTO;
 }
 
+/** Whether a flex box laid out at a width is a column that wraps, whose
+ *  lines are as wide as their items and not as the box, and are placed
+ *  across it here (`crossLines`). */
+function wrapsColumn(style: ComputedStyle, width: number): boolean {
+  return (
+    Number.isFinite(width) &&
+    !style.flexDirection.startsWith('row') &&
+    style.flexWrap !== 'nowrap'
+  );
+}
+
+/** Where an item is across a column that wraps (`crossLines`): its border
+ *  box's left edge from the flex box's content box's, and its width. */
+interface Across {
+  x: number;
+  width: number;
+}
+
+/**
+ * Place a column that wraps across: its lines across the box, and each
+ * item across its line (CSS Flexbox 9.4, steps 8 to 11, and 9.6, steps 13
+ * to 16). From the layout Yoga made of it with every item at its line's
+ * start (`layoutFlex`), in which each item is as wide as it is before it is
+ * stretched, `fit-content` or its own width within its limits, and each
+ * line starts its gap and a pixel past the one before, which is how the
+ * items of one line are told from the next one's.
+ *
+ * A line is as wide as its widest item, margins and all. `align-content`
+ * (its `start` and `end` the box's own sides, `crossContent`) shares out
+ * what the box has past its lines: `stretch` to each line alike,
+ * where they are short of the box; `center` and `flex-end` whether they are
+ * or not, so that lines wider than the box run past both its sides, or its
+ * start; and the spacing values only where there is room, setting the lines
+ * at their start where there is none, or at the box's (CSS Box Alignment 3,
+ * 4.3: `space-between` falls back to `flex-start`, `space-around` and
+ * `space-evenly` to `safe center`, the box's own start where the lines
+ * overflow, and not theirs where they wrap in reverse). An
+ * item with an `auto` margin across its line takes the room the line has
+ * past it on that side (8.1), and none where there is none; a stretched
+ * item is as wide as its line less its margins, within its limits (9.4,
+ * step 11), and as tall as the column made it; and the rest are where
+ * `align-self` says, a baseline at the line's start, as a column has none
+ * across it to align by.
+ */
+function crossLines(
+  style: ComputedStyle,
+  items: readonly { box: Box; node: YogaNode; laid: Laid }[],
+  /** The flex box's content width. */
+  width: number,
+  /** The gap between two lines. */
+  gap: number,
+): Map<Box, Across> {
+  // the lines start at the right where the box runs right to left, or
+  // where they wrap in reverse, and at the left where both are so
+  const fromRight =
+    (style.direction === 'rtl') !== (style.flexWrap === 'wrap-reverse');
+  const lines: number[][] = [];
+  const sizes: number[] = [];
+  // each item's margins across, from its line's start, an `auto` one none
+  const lead: number[] = [];
+  const trail: number[] = [];
+  let last = NaN;
+  items.forEach(({ box, node, laid }, i) => {
+    const yoga = node.getComputedWidth();
+    const left = node.getComputedLeft();
+    const start = fromRight ? width - left - yoga : left;
+    if (!(Math.abs(start - last) < 0.5)) lines.push([]);
+    last = start;
+    lines[lines.length - 1].push(i);
+    sizes.push(meant(yoga, laid.set, laid.stretch, laid.width));
+    const own = box.style;
+    const l = own.marginLeft === AUTO ? 0 : box.marginLeft;
+    const r = own.marginRight === AUTO ? 0 : box.marginRight;
+    lead.push(fromRight ? r : l);
+    trail.push(fromRight ? l : r);
+  });
+  const across = lines.map((line) =>
+    line.reduce((most, i) => Math.max(most, sizes[i] + lead[i] + trail[i]), 0),
+  );
+  const count = lines.length;
+  let room = width - gap * (count - 1);
+  for (const size of across) room -= size;
+  let at = 0;
+  let between = gap;
+  // Where they are wider than the box, `space-around` and `space-evenly`
+  // set the lines at the box's own start (`safe center`), which is where
+  // their last one ends where they wrap in reverse: they run past its end
+  const reverse = style.flexWrap === 'wrap-reverse';
+  switch (crossContent(style)) {
+    case 'flex-end':
+      at = room;
+      break;
+    case 'center':
+      at = room / 2;
+      break;
+    case 'stretch':
+      if (room > 0) across.forEach((_, k) => (across[k] += room / count));
+      break;
+    case 'space-between':
+      if (room > 0 && count > 1) between += room / (count - 1);
+      break;
+    case 'space-around':
+      if (room > 0) {
+        at = room / count / 2;
+        between += room / count;
+      } else if (reverse) at = room;
+      break;
+    case 'space-evenly':
+      if (room > 0) {
+        at = room / (count + 1);
+        between += room / (count + 1);
+      } else if (reverse) at = room;
+      break;
+  }
+  const placed = new Map<Box, Across>();
+  lines.forEach((line, k) => {
+    const size = across[k];
+    for (const i of line) {
+      const { box, node } = items[i];
+      const own = box.style;
+      let itemWidth = sizes[i];
+      let offset = lead[i];
+      const free = size - itemWidth - lead[i] - trail[i];
+      const before = fromRight ? own.marginRight : own.marginLeft;
+      const after = fromRight ? own.marginLeft : own.marginRight;
+      if (before === AUTO || after === AUTO) {
+        if (free > 0 && before === AUTO) {
+          offset += after === AUTO ? free / 2 : free;
+        }
+      } else if (stretches(box, style, false) && !own.widthKeyword) {
+        const most = pointsOf(node.getMaxWidth());
+        const least = pointsOf(node.getMinWidth());
+        itemWidth = size - lead[i] - trail[i];
+        if (itemWidth > most) itemWidth = most;
+        if (itemWidth < least) itemWidth = least;
+        itemWidth = Math.max(itemWidth, box.horizontalExtra);
+      } else {
+        const align = own.alignSelf === AUTO ? style.alignItems : own.alignSelf;
+        if (align === 'center') offset += free / 2;
+        else if (align === 'flex-end') offset += free;
+      }
+      const start = at + offset;
+      placed.set(box, {
+        x: fromRight ? width - start - itemWidth : start,
+        width: itemWidth,
+      });
+    }
+    at += size + between;
+  });
+  return placed;
+}
+
+/** A length Yoga holds in points, or NaN where it holds none. */
+function pointsOf(value: { unit: number; value: number }): number {
+  return value.unit === Y.UNIT_POINT ? value.value : NaN;
+}
+
 /** How deep flex boxes are laid out by Yoga, one inside another's measure
  *  (`layoutFlex`). */
 const FLEX_DEPTH = 64;
@@ -1896,6 +3625,20 @@ function mainJustify(style: ComputedStyle): string {
   return start !== reverse ? 'flex-start' : 'flex-end';
 }
 
+/**
+ * An `align-content` as the cross axis takes it (CSS Box Alignment 3,
+ * 5.1): `start` and `end` are the box's own edges, which are its lines'
+ * cross ends turned round where the box wraps in reverse — `end` in a row
+ * `wrap-reverse` is the bottom, where its lines start.
+ */
+function crossContent(style: ComputedStyle): string {
+  const lines = style.alignContent;
+  if (lines !== 'start' && lines !== 'end') return lines;
+  return (lines === 'start') === (style.flexWrap !== 'wrap-reverse')
+    ? 'flex-start'
+    : 'flex-end';
+}
+
 const JUSTIFY: Record<string, number> = {
   'flex-start': Y?.JUSTIFY_FLEX_START,
   'flex-end': Y?.JUSTIFY_FLEX_END,
@@ -1913,4 +3656,5 @@ const ALIGN: Record<string, number> = {
   baseline: Y?.ALIGN_BASELINE,
   'space-between': Y?.ALIGN_SPACE_BETWEEN,
   'space-around': Y?.ALIGN_SPACE_AROUND,
+  'space-evenly': Y?.ALIGN_SPACE_EVENLY,
 };