Box percentage width calculation is different from the Web

Report

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

I have read the relevant Yoga documentation, but I am not sure if the following behavior is expected. The context for this issue assumes flexDirection: 'row'.

If everything is working as expected, feel free to close this issue.

Issues and Steps to Reproduce

When setting the width of a parent container to be determined by its content, and the child box's width is specified as a percentage, an issue arises. The behavior of the child container with a percentage width differs between Yoga and standard web behavior.

To reproduce, use the following code in Yoga's playground:

<Layout config={{useWebDefaults: false}}>
  <Node style={{width: 350, height: 350, padding: 20, flexDirection: 'row'}}>
    <Node style={{height: 300, flexDirection: 'row'}}>
      <Node style={{width: 200, height: 200}}></Node>
    </Node>
    <Node style={{height: 300, flexDirection: 'row'}}>
      <Node style={{width: '50%', height: 200}}></Node>
    </Node>
  </Node>
</Layout>

Expected Behavior

I expected the child container with width: '50%' to correctly adapt based on the width of its parent container, as it does in web standards.

Actual Behavior

The parent container's width is calculated based on its content, resulting in incorrect rendering when the child uses a percentage width. This differs from standard web behavior where the parent width would be 0 in such a case.

Please let me know if you need any further information or clarification. Thank you for your

Start by running the supplied example in Yoga's playground and compare the percentage-width result with the stated web behavior. Trace the layout calculation responsible for the content-sized parent and percentage child; done means the child renders according to the expected web behavior without regressing the reproduced case.