microsoft
diff --git a/‎src/Reactor/Yoga/FlexPanel.cs‎
Lines changed: 151 additions & 33 deletions b/‎src/Reactor/Yoga/FlexPanel.cs‎
Lines changed: 151 additions & 33 deletions
@@ -294,6 +294,21 @@ private struct ChildLayout { public float X, Y, Width, Height; }
     // Yoga uses the explicit dimension and bypasses MeasureFunction).
     private readonly HashSet<UIElement> _measuredThisPass = new();
 
+    // Yoga's height-axis MeasureMode for the current MeasureFunction call,
+    // threaded down to a nested FlexPanel via [ThreadStatic]. Lets a child
+    // FlexPanel disambiguate two semantically-different "AtMost" cases:
+    //   - WinUI AtMost from a non-Yoga parent (the standard Measure
+    //     contract — VerticalAlignment.Stretch means "fill up to this"),
+    //   - Yoga AtMost from an outer FlexPanel doing basis/FitContent
+    //     measurement (a soft cap on content size, NOT a fill target —
+    //     treating it as fill would make the inner report the cap as its
+    //     DesiredSize and defeat the outer's flex-grow distribution).
+    // null = not nested under a FlexPanel measurement → use the WinUI
+    // contract directly. Yoga Exactly = stretch-fit allocation → fill.
+    // Yoga Undefined / AtMost = basis content measurement → do not fill.
+    [global::System.ThreadStatic]
+    private static YogaMeasureMode? _outerYogaHeightMode;
+
     protected override Size MeasureOverride(Size availableSize)
     {
         _measuredThisPass.Clear();
@@ -325,39 +340,97 @@ protected override Size MeasureOverride(Size availableSize)
                 : YogaValue.Undefined;
         }
 
-        // Block axis: CSS-faithful semantics keyed off the panel's *declared*
-        // height (the FrameworkElement.Height property), not the parent's
-        // offer (availableSize.Height).
+        // Block axis: three modes, in priority order.
+        //
+        // 1. Explicit Height(N): CSS `height: N` — definite container size.
+        //    Pass N to Yoga; Yoga falls into StretchFit mode (justify-content
+        //    / align-items / align-self all need a definite main axis).
+        //
+        // 2. VerticalAlignment.Stretch with a definite parent offer: WinUI
+        //    Stretch + finite availableSize.Height means "fill my parent's
+        //    slot" (analogous to CSS `height: 100%` against a definite-height
+        //    parent). Pass availableSize.Height to Yoga as the container
+        //    size so flex-grow children have a definite pool to distribute.
+        //    This is the symmetric counterpart to inline-axis Stretch above
+        //    and is what makes the canonical web flex pattern —
+        //    header(auto) / body(flex:1) / footer(auto) filling a viewport —
+        //    work without a hard-coded `.Height(N)` on the column.
+        //
+        //    Wobble safety: when an outer FlexPanel runs Yoga in MaxContent
+        //    mode (no explicit height, parent offer infinite — case 3
+        //    below), Yoga's MeasureFunction calls children with
+        //    hMode=Undefined; the MeasureFunction wrapper translates that
+        //    into availableSize.Height = +∞ for the child. With +∞, the
+        //    child below sees `hasDefiniteHeight = false` and falls into
+        //    case 3 — content-sized — exactly as before. So nested
+        //    FlexPanels under an unconstrained outer behave identically to
+        //    the pre-fix code (no DesiredSize drift on horizontal resize).
+        //
+        // 3. Otherwise (no explicit Height, or parent offer is infinite, or
+        //    VerticalAlignment != Stretch): CSS `height: auto`. Pass NaN —
+        //    MaxContent mode, no shrink. Content overflows a smaller parent.
+        // Block axis: three modes, in priority order.
+        //
+        // 1. Explicit .Height(N): CSS `height: N` — definite. Pass N to
+        //    Yoga (StretchFit mode for justify-content / align-items).
+        //
+        // 2. VerticalAlignment.Stretch with a definite parent offer: WinUI
+        //    Stretch + finite availableSize.Height = "fill my parent's
+        //    slot" (analogous to CSS `height: 100%` against a definite
+        //    parent). Pass availableSize.Height to Yoga as the container
+        //    size so flex-grow children have a definite pool to
+        //    distribute. This is the symmetric counterpart to the inline
+        //    axis above and is what makes the canonical web flex pattern —
+        //    header(auto) / body(flex:1) / footer(auto) filling a
+        //    viewport — work without forcing a hardcoded `.Height(N)`.
         //
-        // - Explicit Height(N): CSS `height: N` — definite container size.
-        //   Run Yoga in StretchFit mode by passing N as the availableHeight
-        //   to CalculateLayout (with MaxHeight cleared so the algorithm hits
-        //   the StretchFit fall-through). justify-content / align-items:
-        //   stretch / align-self all need a definite main-axis size to act
-        //   on, and Yoga only treats the axis as definite when the param
-        //   itself is finite and the style has no MaxHeight that overrides.
+        //    The "is parent's AtMost a fill target?" question is what the
+        //    [ThreadStatic] _outerYogaHeightMode resolves: when a parent
+        //    FlexPanel's Yoga is in basis/FitContent measurement, we want
+        //    to report content size, not the cap. Only Yoga's Exactly
+        //    mode (and "no flex parent at all" — the normal WinUI
+        //    contract) means fill. Without this discrimination a nested
+        //    FlexPanel.Stretch under a flex-grow:1 sibling would report
+        //    the cap as its DesiredSize and break the outer's grow
+        //    distribution.
         //
-        // - No Height: CSS `height: auto` — content-sized, no constraint to
-        //   shrink against. Pass NaN: MaxContent mode, no shrink. If the
-        //   parent's offer is smaller than content, content overflows the
-        //   parent rather than redistributing inside the FlexPanel. Pushing
-        //   availableSize.Height into Yoga as a max here would re-introduce
-        //   the resize-jiggle from the original code: every sub-pixel
-        //   finalSize.Height shift would re-run shrink across siblings.
+        //    Trade-off: `Border` (or any auto-height container with no
+        //    flex semantics) wrapping a FlexPanel will inflate to the
+        //    parent's offer rather than shrink-wrap content, because
+        //    `_outerYogaHeightMode` is null in that case (no flex parent)
+        //    so the WinUI Stretch contract applies. Users who want a
+        //    content-sized FlexPanel inside an auto-height container
+        //    should set `VerticalAlignment.Top` (or any non-Stretch).
+        //
+        // 3. Otherwise (no explicit Height and either parent offer is
+        //    infinite, alignment != Stretch, or outer flex wants content
+        //    size): CSS `height: auto`. Pass NaN — MaxContent mode, no
+        //    shrink, content overflows a smaller parent.
         bool hasExplicitHeight = !double.IsNaN(Height);
+        bool outerFlexWantsContent =
+            _outerYogaHeightMode == YogaMeasureMode.Undefined
+            || _outerYogaHeightMode == YogaMeasureMode.AtMost;
+        bool fillBlockAxis = !hasExplicitHeight
+            && !outerFlexWantsContent
+            && VerticalAlignment == VerticalAlignment.Stretch
+            && hasDefiniteHeight;
         _rootNode.MaxHeight = YogaValue.Undefined;
 
+        float rootHeight = hasExplicitHeight
+            ? (float)Height
+            : fillBlockAxis ? (float)availableSize.Height
+            : float.NaN;
+
         _rootNode.CalculateLayout(
             rootWidth,
-            hasExplicitHeight ? (float)Height : float.NaN,
+            rootHeight,
             LayoutDirection);
 
-        // Clamp the reported height to availableSize.Height *only* when the
-        // panel has an explicit Height (CSS `height: N` — the box resolves to
-        // N, never more). Auto-height (CSS `height: auto`) reports the content
-        // size and is allowed to overflow the parent; a smaller parent offer
-        // is not a constraint on `auto`.
-        float reportedHeight = hasExplicitHeight
+        // Clamp the reported height when the panel has a definite own-height
+        // (explicit Height(N) or block-axis fill against a definite parent
+        // offer — both cases the box resolves to that size, never more).
+        bool hasDefiniteOwnHeight = hasExplicitHeight || fillBlockAxis;
+        float reportedHeight = hasDefiniteOwnHeight
             ? Math.Min(_rootNode.LayoutHeight, (float)availableSize.Height)
             : _rootNode.LayoutHeight;
         _cachedDesiredSize = new Size(_rootNode.LayoutWidth, reportedHeight);
@@ -420,17 +493,38 @@ protected override Size ArrangeOverride(Size finalSize)
             {
                 _rootNode.MaxWidth = YogaValue.Undefined;
                 _rootNode.MaxHeight = YogaValue.Undefined;
-                // Mirror MeasureOverride's height policy:
-                //  - explicit Height: pass finalSize.Height as definite so
-                //    Yoga falls into StretchFit (justify-content, align-items
-                //    stretch, align-self all need a definite container).
-                //  - no Height: pass NaN so Yoga is in MaxContent mode and
-                //    sub-pixel finalSize.Height jitter during a horizontal
-                //    drag doesn't trigger flex-shrink across children.
+                // Block-axis policy at arrange time:
+                //  - explicit Height: pass finalSize.Height (== Height) as
+                //    definite so Yoga falls into StretchFit.
+                //  - VerticalAlignment.Stretch (the user opted into "fill
+                //    my parent's slot" — symmetric to the inline axis, which
+                //    has always been treated as definite at finalSize.Width
+                //    a few lines above): pass finalSize.Height as definite
+                //    so Yoga distributes the slot across grow/shrink
+                //    children. This is what gives the canonical web flex
+                //    pattern — `header(auto) / body(flex:1) / footer(auto)`
+                //    filling a viewport — a definite main-axis pool to
+                //    distribute, without forcing a hardcoded `.Height(N)`.
+                //    Wobble protection: this is in Arrange, not Measure, so
+                //    DesiredSize is unaffected. The _arranging flag makes
+                //    the Yoga rerun's MeasureFunction return cached child
+                //    DesiredSize without re-measuring — sub-pixel jitter
+                //    only shifts Yoga's internal positions, not children's
+                //    own DesiredSize.
+                //  - VerticalAlignment != Stretch (caller asked for
+                //    fit-content vertically): pass NaN so Yoga stays in
+                //    MaxContent mode and a horizontal-drag's sub-pixel
+                //    finalSize.Height jitter doesn't drive flex-shrink.
                 bool hasExplicitHeight = !double.IsNaN(Height);
+                bool fillBlockAxisAtArrange = !hasExplicitHeight
+                    && VerticalAlignment == VerticalAlignment.Stretch
+                    && !double.IsInfinity(finalSize.Height);
+                float arrangeHeight = (hasExplicitHeight || fillBlockAxisAtArrange)
+                    ? (float)finalSize.Height
+                    : float.NaN;
                 _rootNode.CalculateLayout(
                     (float)finalSize.Width,
-                    hasExplicitHeight ? (float)finalSize.Height : float.NaN,
+                    arrangeHeight,
                     LayoutDirection);
 
                 // Update cached positions from the new layout
@@ -551,9 +645,33 @@ private void SyncYogaTree()
 
                     // Yoga's constraints are content-area (excluding margin).
                     // Add margin so WinUI's subtraction yields the correct content area.
+                    //
+                    // Mode → WinUI constraint:
+                    //  - Undefined → +∞ (give me your content size).
+                    //  - AtMost / Exactly → finite (w + margin). Preserves
+                    //    the standard WinUI Measure contract — TextBlock
+                    //    wrapping, Image stretch sizing, etc. all depend on
+                    //    receiving a real cap rather than infinity.
+                    //
+                    // The "is this AtMost a fill target?" discrimination is
+                    // not done by changing the constraint — that would break
+                    // text wrapping. Instead the wrapper publishes Yoga's
+                    // hMode via [ThreadStatic] _outerYogaHeightMode so a
+                    // nested FlexPanel.MeasureOverride can tell whether it
+                    // is being measured for content (Undefined / AtMost) or
+                    // for fill (Exactly). See fillBlockAxis above.
                     var constraintW = wMode == YogaMeasureMode.Undefined ? double.PositiveInfinity : w + mH;
                     var constraintH = hMode == YogaMeasureMode.Undefined ? double.PositiveInfinity : h + mV;
-                    capturedChild.Measure(new Size(constraintW, constraintH));
+                    var prevYogaH = _outerYogaHeightMode;
+                    _outerYogaHeightMode = hMode;
+                    try
+                    {
+                        capturedChild.Measure(new Size(constraintW, constraintH));
+                    }
+                    finally
+                    {
+                        _outerYogaHeightMode = prevYogaH;
+                    }
                     panel._measuredThisPass.Add(capturedChild);
                     // Return content size (without margin) since Yoga tracks margins separately
                     return new YogaSize(