Box percentage width calculation is different from the Web #1661

New Issue

2024-06-02T22:12:10-07:00

zxr0000000 commented

2024-06-02 22:12:10 -07:00

(Migrated from github.com)

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

# Report - [x] I have searched [existing issues](https://github.com/facebook/yoga/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: ```js <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> ``` <img width="865" alt="image" src="https://github.com/facebook/yoga/assets/90163617/60af0e9f-9a61-492c-8be7-23eb50080637"> <img width="1158" alt="image" src="https://github.com/facebook/yoga/assets/90163617/5e368396-5174-4113-bf2e-0ca76c243361"> # 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

👍 1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1661