Skip to content

Commit a5c7e47

Browse files
adityasharatfacebook-github-bot
authored andcommitted
Include a leaf's padding and border in its §4.5 automatic minimum size
Summary: X-link: react/yoga#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
1 parent e1b0c77 commit a5c7e47

1 file changed

Lines changed: 8 additions & 1 deletion

File tree

packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -729,7 +729,14 @@ static float computeMinContentMainSize(
729729
wantRow ? MeasureMode::AtMost : MeasureMode::Undefined,
730730
wantRow ? YGUndefined : 0.0f,
731731
wantRow ? MeasureMode::Undefined : MeasureMode::AtMost);
732-
return wantRow ? size.width : size.height;
732+
// Add the leaf's own padding and border, like the container branch below.
733+
const Direction leafDirection = node->resolveDirection(ownerDirection);
734+
const float paddingAndBorder =
735+
node->style().computeFlexStartPaddingAndBorder(
736+
requestedAxis, leafDirection, ownerWidth) +
737+
node->style().computeFlexEndPaddingAndBorder(
738+
requestedAxis, leafDirection, ownerWidth);
739+
return (wantRow ? size.width : size.height) + paddingAndBorder;
733740
}
734741

735742
if (node->getChildCount() == 0) {

0 commit comments

Comments
 (0)