facebook / yoga

Yoga is an embeddable layout engine targeting web standards.
https://yogalayout.dev/
MIT License
17.1k stars 1.41k forks source link

Box percentage width calculation is different from the Web #1661

Open zxr0000000 opened 1 month ago

zxr0000000 commented 1 month ago

Report

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>
image image

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