From 099738ce8e6fe42614a23a6bc2fda45273afd435 Mon Sep 17 00:00:00 2001 From: Aditya Sharat Date: Fri, 19 Jun 2026 07:27:19 -0700 Subject: [PATCH] =?UTF-8?q?Include=20a=20leaf's=20padding=20and=20border?= =?UTF-8?q?=20in=20its=20=C2=A74.5=20automatic=20minimum=20size=20(#57279)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: X-link: https://github.com/react/yoga/pull/1979 X-link: https://github.com/react/yoga/pull/1978 When a flex item with a measure function (such as text) participates in CSS Flexbox §4.5 automatic minimum sizing, its min-content contribution must include the item's own padding and border — the same box model the container-recursion branch and the normal measure pass already apply. The measure-function leaf branch previously returned only the measured content size, so a padded item was floored below its true minimum. Downstream this let content be clipped or wrapped even when there was room for it — for example a single unbroken word breaking across two lines because the floor was one padding-width too small. Both the canonical Yoga copy and the React Native vendored copy are updated, and `YGAutoMinSizeTest` gains coverage on the width (padding + border) and height (padding) axes. Changelog: [General][Fixed] - Include a node's padding and border in its automatic minimum size when it has a measure function Reviewed By: astreet Differential Revision: D108958715 --- .../ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp index 6e7814be2a29..e9d62492daae 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp +++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp @@ -729,7 +729,14 @@ static float computeMinContentMainSize( wantRow ? MeasureMode::AtMost : MeasureMode::Undefined, wantRow ? YGUndefined : 0.0f, wantRow ? MeasureMode::Undefined : MeasureMode::AtMost); - return wantRow ? size.width : size.height; + // Add the leaf's own padding and border, like the container branch below. + const Direction leafDirection = node->resolveDirection(ownerDirection); + const float paddingAndBorder = + node->style().computeFlexStartPaddingAndBorder( + requestedAxis, leafDirection, ownerWidth) + + node->style().computeFlexEndPaddingAndBorder( + requestedAxis, leafDirection, ownerWidth); + return (wantRow ? size.width : size.height) + paddingAndBorder; } if (node->getChildCount() == 0) {