Combining align-content and align-items cause incorrect behavior #1739

New Issue

2024-11-11T21:02:57-08:00

tienlocbui1110 commented

2024-11-11 21:02:57 -08:00

(Migrated from github.com)

Report

I have searched existing issues and this is not a duplicate

Issues and Steps to Reproduce

After upgrading Yoga from version 1.19.0 to 3.1.0, I encountered unexpected behavior when using both align-content and align-items. The layout output seems incorrect in the new version. I tested the same layout on Chrome, and Yoga 1.19.0 aligns correctly with Chrome’s behavior, which matches my expectations.

Here is the test code from Yoga Playground:

<Layout config={{useWebDefaults: true}}>
  <Node style={{
    width: 300,
    height: 300,
    gap: 20,
    flexWrap: "wrap",
    alignContent: "stretch",
    alignItems: "flex-end"
  }}>
    <Node style={{width: 50, height: 50}} />
    <Node style={{width: 50, height: 100}} />
    <Node style={{width: 50, height: 50}} />
    <Node style={{width: 50, height: 50}} />
    <Node style={{width: 50, height: 50}} />
  </Node>
</Layout>

Expected Behavior

You can see the expected behavior in this JSFiddle:

Actual Behavior

The actual output in Yoga 3.1.0 does not match the expected result:

# Report - [x] I have searched [existing issues](https://github.com/facebook/yoga/issues) and this is not a duplicate # Issues and Steps to Reproduce After upgrading Yoga from version 1.19.0 to 3.1.0, I encountered unexpected behavior when using both align-content and align-items. The layout output seems incorrect in the new version. I tested the same layout on Chrome, and Yoga 1.19.0 aligns correctly with Chrome’s behavior, which matches my expectations. Here is the test code from [Yoga Playground](https://www.yogalayout.dev/playground): ``` <Layout config={{useWebDefaults: true}}> <Node style={{ width: 300, height: 300, gap: 20, flexWrap: "wrap", alignContent: "stretch", alignItems: "flex-end" }}> <Node style={{width: 50, height: 50}} /> <Node style={{width: 50, height: 100}} /> <Node style={{width: 50, height: 50}} /> <Node style={{width: 50, height: 50}} /> <Node style={{width: 50, height: 50}} /> </Node> </Layout> ``` # Expected Behavior You can see the expected behavior in this [JSFiddle](https://jsfiddle.net/q27sx9o5/): ![expected](https://github.com/user-attachments/assets/5ddfacb3-1a97-4c99-81f3-409837206ee2) # Actual Behavior The actual output in Yoga 3.1.0 does not match the expected result: ![actual](https://github.com/user-attachments/assets/73f2ec6f-c3c9-4235-956c-53dcaf0121f1)

NickGerleman commented

2024-12-02 23:31:48 -08:00

(Migrated from github.com)

Fixed in Yoga 3.2.0 with above PR

Fixed in Yoga 3.2.0 with above PR <img width="1175" alt="image" src="https://github.com/user-attachments/assets/d88c79d7-c4c8-4687-8355-d11f3a4ba56b">

🎉 1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1739