@react-x11/components 0.13.0 → 0.14.1

package/src/html/layout/flex.ts

@@ -20,8 +20,10 @@
 // independent Yoga pass inside the measure call. Not a nested Yoga node:
 // that would need the whole child subtree mirrored into Yoga's tree, and the
 // measure seam already answers the only question the outer pass asks. What
-// the leaf shape costs is stretch — a stretched item's box grows but its
-// contents are not re-laid at the stretched height.
+// the leaf shape costs is a layout: an item the flex pass made taller or
+// shorter than its content, which lays what is in it out by its height — a
+// flex or grid container, or a box holding a percentage of a height — is
+// laid out again at that height (`layoutItemAt`).
 import { Yoga, layoutLoaded } from 'react-x11/yoga';
 import type { Config as YogaConfig, Node as YogaNode } from 'react-x11/yoga';
 
@@ -32,6 +34,8 @@ import { Box, PAINT_ORDER, isBlank } from './boxes.js';
 import {
   FLEXED_HEIGHT,
   MIN_CONTENT_PROBE,
+  USED_HEIGHT,
+  centreButton,
   clampHeight,
   clampWidth,
   contentSizedWidth,
@@ -122,9 +126,14 @@ export function layoutFlex(
   // percentage that resolves, or what `aspect-ratio` makes of the width —
   // less the padding and borders a `border-box` height holds, which put
   // `h-16 py-2 items-center` eight pixels low. Where it is not, the limits
-  // on it, so a column `min-h-screen` gives its `flex-1` the rest.
+  // on it, so a column `min-h-screen` gives its `flex-1` the rest — or the
+  // height the column it is an item of flexed it to (`USED_HEIGHT`), which
+  // its items are laid out in and take no percentage of.
   const definite = percentBaseInside(box);
-  const height = Number.isFinite(definite) ? definite : null;
+  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;
   if (height !== null) root.setHeight(height);
   else {
     root.setHeightAuto();
@@ -132,7 +141,10 @@ export function layoutFlex(
     const min = clampHeight(box, extra) - extra;
     if (min > 0) root.setMinHeight(min);
     const max = clampHeight(box, Infinity) - extra;
-    if (Number.isFinite(max)) root.setMaxHeight(Math.max(0, max));
+    if (Number.isFinite(max)) {
+      root.setMaxHeight(Math.max(0, max));
+      capped = true;
+    }
   }
 
   const flowing: Box[] = [];
@@ -161,8 +173,18 @@ export function layoutFlex(
   for (const child of flowing) {
     const node = Y.Node.create(flexConfig());
     resolveEdges(child, contentWidth);
-    const laid: Laid = { width: NaN, height: NaN, set: NaN, stretch: NaN };
-    applyItem(node, child, ctx, contentWidth, laid, height !== null);
+    const laid: Laid = {
+      width: NaN,
+      height: NaN,
+      tall: NaN,
+      set: NaN,
+      stretch: NaN,
+      main: NaN,
+      least: NaN,
+      held: NaN,
+      auto: false,
+    };
+    applyItem(node, child, ctx, contentWidth, laid, height !== null, own);
     root.insertChild(node, items.length);
     items.push({ box: child, node, laid });
   }
@@ -170,12 +192,38 @@ export function layoutFlex(
   const direction =
     box.style.direction === 'rtl' ? Y.DIRECTION_RTL : Y.DIRECTION_LTR;
   const row = box.style.flexDirection.startsWith('row');
-  const calculate = (): void =>
+  // 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`)
+  const hold: Hold = {
+    frozen: box.style.flexWrap === 'nowrap',
+    basis: row ? bounded : height !== null,
+  };
+  const ask = (): 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);
+  // 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();
+    }
+  };
+  const calculate = (): void => {
+    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();
+  };
   ctx.flexDepth = depth + 1;
   try {
     calculate();
@@ -184,7 +232,7 @@ export function layoutFlex(
     // another under its own, a few times over at most
     for (
       let pass = 0;
-      pass < 4 && autoMinimums(items, row, ctx, contentWidth);
+      pass < 4 && autoMinimums(items, row, ctx, contentWidth, hold);
       pass += 1
     ) {
       calculate();
@@ -203,8 +251,9 @@ export function layoutFlex(
     ctx,
     items,
     row,
-    height,
+    own,
     box.style.flexWrap === 'wrap' || baselines,
+    contentWidth,
   );
   // Items aligned by their baselines, which Yoga cannot see, are aligned
   // with their baselines known (`baselineLines`)
@@ -237,8 +286,9 @@ export function layoutFlex(
       ctx,
       items,
       row,
-      height,
+      own,
       box.style.flexWrap === 'wrap',
+      contentWidth,
       started,
     );
   }
@@ -264,8 +314,9 @@ export function layoutFlex(
       ctx,
       items,
       row,
-      height,
+      own,
       box.style.flexWrap === 'wrap' || baselines,
+      contentWidth,
     );
   }
 
@@ -278,11 +329,11 @@ export function layoutFlex(
  *  base size the ratio makes of the stretched size; whether any changed. */
 function keepRatios(
   container: Box,
-  items: readonly { box: Box; node: YogaNode }[],
+  items: readonly { box: Box; node: YogaNode; laid: Laid }[],
   row: boolean,
 ): boolean {
   let changed = false;
-  for (const { box, node } of items) {
+  for (const { box, node, laid } of items) {
     if (box.kind !== 'replaced' || !stretches(box, container.style, row)) {
       continue;
     }
@@ -295,9 +346,16 @@ function keepRatios(
         box.horizontalExtra
       : Math.max(0, node.getComputedWidth() - box.horizontalExtra) / ratio +
         box.verticalExtra;
-    const main = row ? node.getComputedWidth() : node.getComputedHeight();
-    if (Math.abs(basis - main) < 0.5) continue;
+    if (Math.abs(basis - laid.main) < 0.5) continue;
     node.setFlexBasis(basis);
+    // one held at its least size (`holdAt`) flexes from the new basis, no
+    // further down than that
+    if (!Number.isNaN(laid.held)) {
+      laid.held = NaN;
+      laid.auto = false;
+      node.setFlexGrow(style.flexGrow);
+      node.setFlexShrink(style.flexShrink);
+    }
     changed = true;
   }
   return changed;
@@ -431,9 +489,12 @@ function placeItems(
   ctx: LayoutContext,
   items: readonly { box: Box; node: YogaNode; laid: Laid }[],
   row: boolean,
-  height: number | null,
+  /** Whether the flex box has a definite height. */
+  own: boolean,
   /** Whether Yoga aligned the lines in its pass that drops a margin. */
   lined: boolean,
+  /** The flex box's content width: its items' containing block's. */
+  contentWidth: number,
   started?: ReadonlySet<Box>,
 ): number {
   let bottom = 0;
@@ -444,12 +505,13 @@ function placeItems(
     const left = box.contentX + node.getComputedLeft() + (row ? 0 : across);
     const top = box.contentY + node.getComputedTop() + (row ? across : 0);
     const width = meant(
-      node.getComputedWidth(),
+      row ? laid.main : node.getComputedWidth(),
       laid.set,
       laid.stretch,
       laid.width,
+      row ? laid.held : NaN,
     );
-    const itemHeight = node.getComputedHeight();
+    const itemHeight = row ? node.getComputedHeight() : laid.main;
     // 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
@@ -459,12 +521,15 @@ function placeItems(
     // 9.8): stretched across a row's line, or flexed in a column of a
     // height of its own. What is in it takes its percentages of that —
     // the `h-full` in a stretched sidebar — where they had nothing to be
-    // of, and the item is laid out again for them.
+    // of, and the item is laid out again for them; and so is one that is a
+    // flex or grid container itself, whose own items are laid out in that
+    // height (9.4, step 11: "redo layout for its contents, treating this
+    // used size as its definite cross size").
     const definite = row
       ? stretches(child, box.style)
         ? itemHeight
         : null
-      : height !== null
+      : own
         ? itemHeight
         : null;
     layoutItemAt(
@@ -476,6 +541,7 @@ function placeItems(
       itemHeight,
       laid,
       definite,
+      contentWidth,
       !row,
     );
     // to the end of its margin box, as Yoga measured the box: a negative
@@ -496,6 +562,8 @@ function layoutItemAt(
   laid: Laid,
   /** Its border box's height where the flex layout made it definite. */
   definite: number | null,
+  /** The flex box's content width, the item's containing block's. */
+  containing: number,
   /** Whether its height is the one the flex layout gave it, in a column,
    *  whatever its own says: flexed, it is shrunk as well as grown. */
   column = false,
@@ -509,29 +577,76 @@ function layoutItemAt(
     box.height = height;
     return;
   }
-  const inner =
-    definite === null || !percentHeightsIn(box)
-      ? null
-      : Math.max(0, definite - box.verticalExtra);
-  if (inner !== null && !Object.is(inner, percentBaseInside(box))) {
-    FLEXED_HEIGHT.set(box, inner);
-    try {
-      ctx.layoutSubtree(box, width);
-    } finally {
-      FLEXED_HEIGHT.delete(box);
+  const sameWidth = Math.abs(laid.width - width) <= 0.01;
+  // The content height the item is laid out at, where the flex layout gave
+  // it one that is not its own already: NaN where its content says how
+  // tall it is.
+  let tall = NaN;
+  // A flex or grid container shares its height out among its items: an
+  // `auto` margin takes what is free of it (8.1), a `flex: 1` grows into it
+  // (9.7), its lines are as tall as it (9.4), its `fr` rows fill it. So it
+  // is laid out in the height the flex layout gave it, definite or not —
+  // the one a column with no height of its own flexed it to is its used
+  // size all the same (9.7), and `min-h-screen flex flex-col` around a
+  // `flex-1 flex items-center` centres what is in that. At its content's
+  // own height there is nothing to share, and the layout it has is that
+  // 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.
+  const given = definite ?? (column ? height : null);
+  let shares = false;
+  if (given !== null && (box.kind === 'flex' || box.kind === 'table')) {
+    const natural = naturalHeight(box, ctx, width, containing, laid);
+    shares =
+      box.kind === 'flex'
+        ? !(Math.abs(natural - given) <= 0.01)
+        : !(natural >= given - 0.01);
+  }
+  if (given !== null) {
+    const inner = Math.max(0, given - box.verticalExtra);
+    if (Object.is(inner, percentBaseInside(box))) {
+      // the height it has of its own
+    } else if (shares || (definite !== null && percentHeightsIn(box))) {
+      tall = inner;
     }
   }
   // `measureBox` lays the box out at (0, 0); re-running it at the final width
   // and then moving it is one pass, not two, because the second call is the
-  // one whose result is kept — or no pass, where the last measure was at
-  // this width. An item Yoga never measured has none, NaN, and is laid out.
-  else if (Math.abs(laid.width - width) <= 0.01) box.height = laid.height;
-  else ctx.layoutSubtree(box, width);
+  // one whose result is kept — or no pass, where the last layout was at
+  // this width and this height. An item Yoga never measured has none, NaN,
+  // and is laid out.
+  if (sameWidth && Object.is(laid.tall, tall)) box.height = laid.height;
+  else if (Number.isNaN(tall)) {
+    layoutNaturally(box, ctx, width, containing, laid);
+  } else {
+    // what is in it takes its percentages of a definite height alone (9.8)
+    const heights = definite !== null ? FLEXED_HEIGHT : USED_HEIGHT;
+    heights.set(box, tall);
+    try {
+      ctx.layoutSubtree(box, width, containing);
+    } finally {
+      heights.delete(box);
+    }
+    laid.width = box.width;
+    laid.height = box.height;
+    laid.tall = tall;
+  }
   // A stretched item is taller than its content, and the box has to say so
   // or its background stops short of the row — and it is no taller than its
   // line where its content is, or than what its ratio makes of its width:
-  // its height is the line's (CSS Flexbox 9.4, step 11).
-  if (height > box.height || column || definite !== null) box.height = height;
+  // its height is the line's (CSS Flexbox 9.4, step 11). But for a table,
+  // whose rows are the least it can be, however short its line (CSS 2.1
+  // 17.5.3, as a height of its own is; Blink: "Tables can't shrink below
+  // their min-intrinsic size").
+  if (
+    height > box.height ||
+    ((column || definite !== null) && box.kind !== 'table')
+  ) {
+    box.height = height;
+  }
+  // and a button's content is centred in the height it came to
+  centreButton(box);
   moveTo(box, x, y);
 }
 
@@ -561,8 +676,11 @@ function applyItem(
   ctx: LayoutContext,
   containingWidth: number,
   laid: Laid,
-  /** Whether the flex box has a height of its own. */
+  /** 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,
 ): void {
   const style = box.style;
   laid.stretch = containingWidth - box.marginLeft - box.marginRight;
@@ -590,9 +708,20 @@ function applyItem(
   if (style.width !== AUTO) {
     laid.set = setLength(node, true, style.width, containingWidth, across);
   }
-  if (style.height !== AUTO) setLength(node, false, style.height, NaN, down);
+  // 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);
+  }
+  // the least it may be along each axis, its border box's, as Yoga is
+  // told it
+  let leastWidth = NaN;
+  let leastHeight = NaN;
   const minWidth = resolveOrNull(style.minWidth, containingWidth);
-  if (minWidth !== null) node.setMinWidth(minWidth + across);
+  if (minWidth !== null) {
+    leastWidth = minWidth + across;
+    node.setMinWidth(leastWidth);
+  }
   if (style.maxWidth !== 'none') {
     const maxWidth = resolveOrNull(style.maxWidth, containingWidth);
     if (maxWidth !== null) node.setMaxWidth(maxWidth + across);
@@ -611,17 +740,24 @@ function applyItem(
       laid.set = size(style.widthKeyword);
       node.setWidth(laid.set);
     }
-    if (style.minWidthKeyword) node.setMinWidth(size(style.minWidthKeyword));
+    if (style.minWidthKeyword) {
+      leastWidth = size(style.minWidthKeyword);
+      node.setMinWidth(leastWidth);
+    }
     if (style.maxWidthKeyword) node.setMaxWidth(size(style.maxWidthKeyword));
   }
   const minHeight = resolveOrNull(style.minHeight, NaN);
-  if (minHeight !== null) node.setMinHeight(minHeight + down);
+  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 row = box.parent?.style.flexDirection.startsWith('row') ?? true;
+  laid.least = row ? leastWidth : leastHeight;
   // 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
@@ -653,6 +789,9 @@ function applyItem(
     setBasis(columnBasis);
   } else if (style.flexBasis === 'content' || style.flexBasis === AUTO) {
     // Yoga's own
+  } else if (isPct(style.flexBasis) && !row && tall && !own) {
+    // a percentage of a main size that is not definite is `content` (CSS
+    // Flexbox 7.2.3): Yoga's own, down a column
   } else if (isPct(style.flexBasis)) {
     // a percentage of the main size, which is known across a row
     const basis = style.flexBasis;
@@ -738,7 +877,13 @@ function applyItem(
     const width = meant(w, laid.set - extra, laid.stretch - extra);
     const given = hm === Y.MEASURE_MODE_EXACTLY && Number.isFinite(h);
     const exact = wm === Y.MEASURE_MODE_EXACTLY && Number.isFinite(width);
-    const through = widthThrough && given && !exact ? widthThrough(h) : null;
+    // the height it was flexed to, that is: one its automatic minimum
+    // holds it at (`holdAt`) is its content's, which a replaced element's
+    // width follows through its ratio and no other's does (CSS Sizing 4,
+    // 5.1)
+    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
@@ -758,10 +903,8 @@ function applyItem(
     }
     let answer = answers.get(inner);
     if (answer === undefined) {
-      answer = measureBox(box, ctx, inner);
+      answer = measureBox(box, ctx, inner, containingWidth, laid);
       answers.set(inner, answer);
-      laid.width = box.width;
-      laid.height = box.height;
     }
     return answer;
   });
@@ -777,12 +920,28 @@ const MAX_CONTENT = new WeakMap<Box, number>();
 interface Laid {
   width: number;
   height: number;
+  /** The content height that layout was made at, where the flex layout gave
+   *  the item one (`FLEXED_HEIGHT`, `USED_HEIGHT`), and NaN where its
+   *  content's own. */
+  tall: number;
   /** The border-box width this engine set on the item's node — a length,
    *  or the content's for `fit-content` and its kin — or NaN. */
   set: number;
   /** Its border-box width stretched across its container: the container's
    *  content width, less its margins. */
   stretch: number;
+  /** Its border box's size along the main axis in the layout Yoga last
+   *  made of the flex box, as Yoga has it. */
+  main: number;
+  /** 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 size along the main axis it is frozen at, inflexible (`freezeAt`),
+   *  or NaN. */
+  held: number;
+  /** Whether that is its automatic minimum (`holdAt`), its content's size,
+   *  and not a minimum the line stopped at (`stoppedLine`). */
+  auto: boolean;
 }
 
 /**
@@ -855,14 +1014,236 @@ function measureBox(
   box: Box,
   ctx: LayoutContext,
   inner: number,
+  /** The flex box's content width, the item's containing block's. */
+  containing: number,
+  laid: Laid,
 ): { width: number; height: number } {
-  ctx.layoutSubtree(box, inner + box.horizontalExtra);
+  // its padding as Yoga has it, a percentage of the flex box's width: a
+  // probe of its content's width leaves a percentage at none
+  resolveEdges(box, containing);
+  const width = inner + box.horizontalExtra;
+  // its height at this width is known, where a layout since has left it
+  // another: the answer is the height, and the layout `layoutItemAt`'s
+  const kept = keptNatural(box, ctx, width, containing);
+  if (kept !== null && kept.serial !== box.layoutSerial) {
+    return {
+      width: inner,
+      height: Math.max(0, kept.height - box.verticalExtra),
+    };
+  }
+  layoutNaturally(box, ctx, width, containing, laid);
   return {
     width: inner,
     height: Math.max(0, box.height - box.verticalExtra),
   };
 }
 
+/** An item's height as its content's own makes it at a border-box width,
+ *  where this pass has laid it out so (`layoutNaturally`), and else NaN. */
+function naturalHeight(
+  box: Box,
+  ctx: LayoutContext,
+  width: number,
+  containing: number,
+  laid: Laid,
+): number {
+  if (Math.abs(laid.width - width) <= 0.01 && Number.isNaN(laid.tall)) {
+    return laid.height;
+  }
+  return keptNatural(box, ctx, width, containing)?.height ?? NaN;
+}
+
+/**
+ * Give an item the layout its content's own height makes of it at a
+ * border-box width, and note it (`Laid`): the one this pass has made of it
+ * there already, where it still has it.
+ *
+ * A flex box laid out a second time — at the height a stretch gave it, its
+ * own flex layout made anew (`layoutItemAt`) — asks of each item what it
+ * asked the first time, and the item's layout at a width is what it was.
+ * Kept for the pass, a card laid out again for its height lays nothing in
+ * it out that is where it was; made again at every layout of the box
+ * around it, a card in a card in a card laid its innermost out twice a
+ * level.
+ */
+function layoutNaturally(
+  box: Box,
+  ctx: LayoutContext,
+  width: number,
+  /** The flex box's content width, the item's containing block's. */
+  containing: number,
+  laid: Laid,
+): void {
+  const kept = keptNatural(box, ctx, width, containing);
+  if (kept !== null && kept.serial === box.layoutSerial) {
+    // put back, where the flex layout stretched it
+    box.height = kept.height;
+  } else {
+    const at = ctx.positioned.length;
+    ctx.layoutSubtree(box, width, containing);
+    // a replaced box is sized, not laid out, and has no layout to count
+    if (box.kind !== 'replaced') {
+      NATURAL.set(box, {
+        ctx,
+        serial: box.layoutSerial,
+        width,
+        containing: readsContaining(box) ? containing : NaN,
+        base: box.percentHeightBase,
+        edges: edgesOf(box),
+        height: box.height,
+        queued:
+          ctx.positioned.length > at ? { at, first: ctx.positioned[at] } : null,
+        drawn: NaN,
+        content: NaN,
+      });
+    }
+  }
+  laid.width = box.width;
+  laid.height = box.height;
+  laid.tall = NaN;
+}
+
+/**
+ * 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
+ * width, the same edges — a percentage among them resolved, as the layout
+ * leaves them — the same containing block's width where a limit on its own
+ * is a percentage of it, and the same height for its percentages, where its
+ * own style reads that at all, which the flex box around it coming to a
+ * definite height changes for every item in it. Its `height` is the item's
+ * there whatever has laid it out since, and the layout is the one the box
+ * has where nothing has (`Box.layoutSerial`).
+ */
+function keptNatural(
+  box: Box,
+  ctx: LayoutContext,
+  width: number,
+  containing: number,
+): Natural | null {
+  const kept = NATURAL.get(box);
+  if (kept === undefined || kept.ctx !== ctx || kept.width !== width) {
+    return null;
+  }
+  if (!Number.isNaN(kept.containing) && kept.containing !== containing) {
+    return null;
+  }
+  if (!Object.is(kept.base, box.percentHeightBase) && readsPercentBase(box)) {
+    return null;
+  }
+  // the boxes in it that are positioned last are still waiting to be: a
+  // `line-clamp: auto` box laid out a second time forgets the ones its
+  // first layout found
+  if (kept.queued && ctx.positioned[kept.queued.at] !== kept.queued.first) {
+    return null;
+  }
+  const edges = kept.edges;
+  return edges[0] === box.marginTop &&
+    edges[1] === box.marginRight &&
+    edges[2] === box.marginBottom &&
+    edges[3] === box.marginLeft &&
+    edges[4] === box.borderTop &&
+    edges[5] === box.borderRight &&
+    edges[6] === box.borderBottom &&
+    edges[7] === box.borderLeft &&
+    edges[8] === box.padTop &&
+    edges[9] === box.padRight &&
+    edges[10] === box.padBottom &&
+    edges[11] === box.padLeft
+    ? kept
+    : null;
+}
+
+/** A layout of an item at its content's own height (`layoutNaturally`): in
+ *  which pass, which of the box's layouts it was, and what it was made
+ *  from. */
+interface Natural {
+  ctx: LayoutContext;
+  serial: number;
+  /** The border-box width it was asked for at. */
+  width: number;
+  /** Its containing block's width, where a limit on its own width is a
+   *  percentage of that (`readsContaining`), and else NaN: a nest of flex
+   *  boxes is laid out in rooms of many widths, and an item with no such
+   *  limit is laid out the same in each. */
+  containing: number;
+  /** The height its percentages were of. */
+  base: number;
+  /** Its margins, borders and padding once laid out (`edgesOf`). */
+  edges: number[];
+  height: number;
+  /** The first of the out-of-flow boxes that layout queued to be
+   *  positioned (`LayoutContext.positioned`) and where; null for none. */
+  queued: { at: number; first: LayoutContext['positioned'][number] } | null;
+  /** What `autoMinimums` read from that layout, NaN until it has: how wide
+   *  it drew, and how far down its content came, each its border box's. */
+  drawn: number;
+  content: number;
+}
+
+const NATURAL = new WeakMap<Box, Natural>();
+
+/** Note what was read from the layout an item has, where that is the one
+ *  its content's own height makes of it at `width`. */
+function remember(
+  box: Box,
+  ctx: LayoutContext,
+  width: number,
+  containing: number,
+  field: 'drawn' | 'content',
+  value: number,
+): void {
+  const made = keptNatural(box, ctx, width, containing);
+  if (made !== null && made.serial === box.layoutSerial) made[field] = value;
+}
+
+/** A box's edges, which a layout resolves again against the width it is
+ *  given: margins, borders, padding, each from the top round. */
+function edgesOf(box: Box): number[] {
+  return [
+    box.marginTop,
+    box.marginRight,
+    box.marginBottom,
+    box.marginLeft,
+    box.borderTop,
+    box.borderRight,
+    box.borderBottom,
+    box.borderLeft,
+    box.padTop,
+    box.padRight,
+    box.padBottom,
+    box.padLeft,
+  ];
+}
+
+/** Whether the width a box is laid out at is held to a percentage of its
+ *  containing block's: a least or greatest width that is one. */
+function readsContaining(box: Box): boolean {
+  const style = box.style;
+  return (
+    isPct(style.minWidth) ||
+    (style.maxWidth !== 'none' && isPct(style.maxWidth))
+  );
+}
+
+/** Whether a box's own layout reads the height its percentages are of: a
+ *  height, a least or greatest one, or an offset that is a percentage, a
+ *  height that is a keyword — `stretch` fills it — or an anonymous box,
+ *  which hands it on to what is in it (`percentBaseInside`). */
+function readsPercentBase(box: Box): boolean {
+  if (!box.el && !box.pseudo) return true;
+  const style = box.style;
+  return (
+    isPct(style.height) ||
+    isPct(style.minHeight) ||
+    (style.maxHeight !== 'none' && isPct(style.maxHeight)) ||
+    isPct(style.top) ||
+    isPct(style.bottom) ||
+    style.heightKeyword !== null ||
+    style.minHeightKeyword !== null ||
+    style.maxHeightKeyword !== null
+  );
+}
+
 /** 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). */
@@ -903,6 +1284,7 @@ function autoMinimums(
   row: boolean,
   ctx: LayoutContext,
   containingWidth: number,
+  hold: Hold,
 ): boolean {
   let changed = false;
   for (const { box, node, laid } of items) {
@@ -915,17 +1297,18 @@ function autoMinimums(
       continue;
     }
     const width = meant(
-      node.getComputedWidth(),
+      row ? laid.main : node.getComputedWidth(),
       laid.set,
       laid.stretch,
       laid.width,
+      row ? laid.held : NaN,
     );
     // a replaced item's content along a row is its natural width
     if (row && box.kind === 'replaced') {
       if (style.minWidth !== AUTO || style.minWidthKeyword) continue;
       const least = replacedMinimum(box, containingWidth);
       if (least === null || width >= least - 0.01) continue;
-      node.setMinWidth(least);
+      holdAt(node, laid, row, least, hold);
       changed = true;
       continue;
     }
@@ -952,7 +1335,7 @@ function autoMinimums(
           if (most !== null) least = Math.min(least, most + extra);
         }
         if (width >= least - 0.01) continue;
-        node.setMinWidth(least);
+        holdAt(node, laid, row, least, hold);
         changed = true;
         continue;
       }
@@ -980,8 +1363,8 @@ function autoMinimums(
       }
       if (width >= least - 0.01) continue;
       least = Math.min(least, minContentOf(box, ctx, laid));
-      if (node.getComputedWidth() >= least - 0.01) continue;
-      node.setMinWidth(least);
+      if (laid.main >= least - 0.01) continue;
+      holdAt(node, laid, row, least, hold);
       changed = true;
       continue;
     }
@@ -995,16 +1378,38 @@ function autoMinimums(
     ) {
       continue;
     }
-    if (!(Math.abs(laid.width - width) <= 0.01)) {
-      ctx.layoutSubtree(box, width);
-      laid.width = box.width;
-      laid.height = box.height;
+    // What its content's own height makes of it at this width — how wide
+    // that drew, along a row, and how far down, along a column — is read
+    // from that layout, which the item is given where it has another: or
+    // is what this pass read from it before, where the flex box is laid
+    // out a second time (`layoutNaturally`)
+    const kept = keptNatural(box, ctx, width, containingWidth);
+    const read = kept === null ? NaN : row ? kept.drawn : kept.content;
+    if (Number.isNaN(read) && !(Math.abs(laid.width - width) <= 0.01)) {
+      layoutNaturally(box, ctx, width, containingWidth, laid);
     }
+    const height = Number.isNaN(read) ? laid.height : kept!.height;
     let least: number;
     if (row) {
-      // or than what it drew at the width it has: nothing overflows it
-      const drawn = intrinsicWidth(box) + box.horizontalExtra;
-      if (transferredWidth(box, drawn) <= width + 0.5) continue;
+      // or than what it drew at the width it has: nothing overflows it —
+      // unless a line in it fits for being cut short by `text-overflow`,
+      // which is how the line is drawn and no part of how wide it is: a
+      // button whose label is a `truncate` span is no narrower than the
+      // label, where it was shrunk and the label cut. No width, then, that
+      // it drew at, which is what is kept of it
+      let drawn = read;
+      if (Number.isNaN(drawn)) {
+        const seen = { cut: false };
+        drawn = intrinsicWidth(box, seen) + box.horizontalExtra;
+        if (seen.cut) drawn = Infinity;
+        remember(box, ctx, width, containingWidth, 'drawn', drawn);
+      }
+      if (
+        Number.isFinite(drawn) &&
+        transferredWidth(box, drawn) <= width + 0.5
+      ) {
+        continue;
+      }
       // within what a ratio makes of its least and greatest heights (4.5's
       // content size suggestion)
       least = transferredWidth(box, minContentOf(box, ctx, laid));
@@ -1013,55 +1418,257 @@ function autoMinimums(
         const most = resolveOrNull(style.maxWidth, containingWidth);
         if (most !== null) least = Math.min(least, most + extra);
       }
-      if (node.getComputedWidth() >= least - 0.01) continue;
-      node.setMinWidth(least);
+      if (laid.main >= least - 0.01) continue;
+      holdAt(node, laid, row, least, hold);
     } 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: number;
-      if (box.kind === 'replaced') content = laid.height;
+      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);
+          ctx.layoutSubtree(box, width, containingWidth);
         } finally {
           FLEXED_HEIGHT.delete(box);
         }
-        content = contentBottom(box) + box.verticalExtra;
+        content = ratioContent(box, contentBottom(box) + box.verticalExtra);
         laid.width = NaN;
-      } else content = contentBottom(box) + box.verticalExtra;
-      // and a ratio's content is at least its width through the ratio,
-      // height of its own or not (CSS Sizing 4, 5.1)
-      const aspect = style.aspectRatio;
-      if (aspect && box.kind !== 'replaced') {
-        content = Math.max(
-          content,
-          style.boxSizing === 'border-box'
-            ? box.width / aspect.ratio
-            : box.contentWidth / aspect.ratio + box.verticalExtra,
-        );
+      } else {
+        content = ratioContent(box, contentBottom(box) + box.verticalExtra);
+        remember(box, ctx, width, containingWidth, 'content', content);
       }
       // within what the ratio makes of its least and greatest widths
       if (box.kind !== 'replaced') {
         content = transferredHeight(box, content, containingWidth);
       }
-      least = Math.min(laid.height, content);
+      least = Math.min(height, content);
       const extra = style.boxSizing === 'border-box' ? 0 : box.verticalExtra;
       if (style.maxHeight !== 'none') {
         const most = resolveOrNull(style.maxHeight, NaN);
         if (most !== null) least = Math.min(least, most + extra);
       }
-      if (node.getComputedHeight() >= least - 0.01) continue;
-      node.setMinHeight(least);
+      if (laid.main >= least - 0.01) continue;
+      holdAt(node, laid, row, least, hold);
     }
     changed = true;
   }
   return changed;
 }
 
+/** 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 {
+  const aspect = box.style.aspectRatio;
+  if (!aspect || box.kind === 'replaced') return content;
+  return Math.max(
+    content,
+    box.style.boxSizing === 'border-box'
+      ? box.width / aspect.ratio
+      : box.contentWidth / aspect.ratio + box.verticalExtra,
+  );
+}
+
+/** How a flex box holds its items to their least sizes (`holdAt`). */
+interface Hold {
+  /** Whether an item is frozen at its least size: on the one line of a
+   *  box that does not wrap. */
+  frozen: boolean;
+  /** Whether Yoga takes a length for a basis along the main axis
+   *  (`applyItem`'s `setBasis`), and else the item's own size. */
+  basis: boolean;
+}
+
+/**
+ * Hold an item to its least size along the main axis, the size Yoga gave
+ * it being under that. It is frozen there, as CSS Flexbox freezes an item
+ * its minimum stops (9.7, step 4): inflexible, at that size, the rest of
+ * the line sharing what is left. Handed the minimum as a `min-width`
+ * alone, Yoga makes it the item's flex base size, which is two things the
+ * specification does not do:
+ *
+ * - where the line has room to share out, the item takes its share on top
+ *   of the minimum: of three `flex: 1` items in 300 pixels, the one with a
+ *   word 200 wide was 233, where it is 200 and the others 50 each;
+ * - where every item of a line is held, Yoga divides what the line is
+ *   short of by what is left of the shrink factors once it has taken each
+ *   item's away — nothing, or a float's rounding of it. Two items 110.992
+ *   and 62.706 pixels wide in a row too narrow for them came out billions
+ *   of pixels wide, and 31.3 and 17.7 came out as they are: by the digits
+ *   of their sizes, which are a text's widths in whatever font it is set.
+ *
+ * On the one line of a box that does not wrap, an item Yoga had under its
+ * minimum has no more room when another is held too, so frozen is where it
+ * ends. In a box that wraps it may have: the minimums move the line breaks
+ * (9.3), and an item held on a crowded line may be on one with room to
+ * grow in once they have. There the minimum is left to Yoga, as a minimum;
+ * only a line of one item is short of room there, and what Yoga takes away
+ * from its shrink factors is exactly what it added.
+ */
+function holdAt(
+  node: YogaNode,
+  laid: Laid,
+  row: boolean,
+  least: number,
+  hold: Hold,
+): void {
+  if (row) node.setMinWidth(least);
+  else node.setMinHeight(least);
+  if (!hold.frozen) return;
+  laid.auto = true;
+  freezeAt(node, laid, row, least, hold);
+}
+
+/** Freeze an item at a size along the main axis: inflexible, and that size
+ *  its flex base size. */
+function freezeAt(
+  node: YogaNode,
+  laid: Laid,
+  row: boolean,
+  size: number,
+  hold: Hold,
+): void {
+  laid.held = size;
+  node.setFlexGrow(0);
+  node.setFlexShrink(0);
+  if (hold.basis) node.setFlexBasis(size);
+  else if (row) node.setWidth(size);
+  else node.setHeight(size);
+}
+
+/**
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ */
+function stoppedLine(
+  items: readonly { box: Box; node: YogaNode; laid: Laid }[],
+  row: boolean,
+  /** The flex box's size along the main axis. */
+  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;
+  let shrinking = 0;
+  let over = 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 (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;
+    }
+    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;
+    }
+  }
+  // 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 false;
+  }
+
+  const stopped = items.filter(({ box, laid }) => shrinks(box, laid));
+  for (const { node } of stopped) 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;
+      }
+    }
+  }
+  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);
+  }
+  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);
+}
+
+/** How near to its room a line may be and be short of it (`stoppedLine`). */
+const SHORT = 0.001;
+
+/** 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);
+}
+
 /** 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 {