[Yoga 3] Wrong outcome of max-height percentage value

[TheAdamBorek]

Report

• I have searched existing issues and this is not a duplicate

Issues and Steps to Reproduce

Description

In React Native app we set a wrapper height to 200% and then another wrapper gets max-height set to 50% (resulting in that {children} should have max "100%" size). We do that for pan gesture overflow & animations.

       {/* Represented as red rect beloew*/}
        <Animated.View style={[{
            width: "100%",
            height: "200%",
        }, [...]]}> 
              {/* Represented as orange rect below*/}
              <View style={{
                width: "100%",
                maxHeight: "50%",
              }}>
                   {/* Represented as yellow rect below*/}
                    {children}
                </View>
        </Animated.View>
    );

With recent update from "react-native": "0.73.4" -> "react-native": "0.74.1" we have noticed that {children} is 2 times smaller than it used to be.

Here's html screenshot illustrating the behaviour on web:

• Yoga fails to calculate the size for the orange rectangle.
• Other rectangles are just there to mimic our React Native's <View /> setup
• Source code of the html can be found below (as I've used it to yarn gentest)

Expected Behavior

Test to pass & to work the same as in html

Actual Behavior

Test fails

yarn gentest sample

Here's the html sourcecode

<div id="max-height-2times-smaller-than-height-showcase" style="display: flex; flex-direction: row; gap: 50px">
    <div id="max-height-doesnt-work"
        style="height: 400px; width: 400px; padding-left: 10px; padding-right: 10px; border: black dashed 3px;">
        <div id="container" style="height: 200%; padding-left: 10px; padding-right: 10px; border: red dashed 3px;">
            <div id="parent"
                style="max-height: 50%; padding-left: 10px; padding-right: 10px; border: orange dashed 3px;">
                <div id="child"
                    style="height: 800px; padding-left: 10px; padding-right: 10px; border: yellow dashed 3px;">
                </div>
            </div>
        </div>
    </div>
    <div id="height-works-fine"
        style="height: 400px; width: 400px; padding-left: 10px; padding-right: 10px; border: black dashed 3px;">
        <div id="container-2" style="height: 200%; padding-left: 10px; padding-right: 10px; border: red dashed 3px;">
            <div id="parent-2" style="height: 50%; padding-left: 10px; padding-right: 10px; border: orange dashed 3px;">
                <div id="child-2"
                    style="height: 800px; padding-left: 10px; padding-right: 10px; border: yellow dashed 3px;">
                </div>
            </div>
        </div>
    </div>
    <div id="max-height-workaround"
        style="height: 400px; width: 400px; padding-left: 10px; padding-right: 10px; border: black dashed 3px;">
        <div id="container-3" style="height: 200%; padding-left: 10px; padding-right: 10px; border: red dashed 3px;">
            <div style="height: 100%; border: green dashed 3px;">
                <div id="parent-3"
                    style="max-height: 50%; padding-left: 10px; padding-right: 10px; border: orange dashed 3px;">
                    <div id="child-3"
                        style="height: 800px; padding-left: 10px; padding-right: 10px; border: yellow dashed 3px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

[NickGerleman]

Thanks for reporting this! I’m going to carve out some time to debug this, since it’s a new regression. I suspect this is related to changes made to fix maxHeight behavior for multiline containers.