flex with non flex wraper do not respect children size #1787

New Issue

2025-02-14T05:22:38-08:00

MateWW commented

2025-02-14 05:22:38 -08:00

(Migrated from github.com)

Hello,

I've noticed discrepancy between yoga and web(chrome and safari tested) behaviour.

Its very easy to notice that on snack
https://snack.expo.dev/@matew/yoga-rendering-issue

iOS	Android	Web

Summary

To make it easier lets assume the following:
container - is the first component with no height and flex set
flex wrapper - is container child which has flex set and border defined
static component - is flex wrapper child which has static size (50x50)

As you may notice on above screenshot for mobile devices border applied on
flex wrapper is just squeezed and overlaps with static component

In that situation yoga set that flex wrapper size to 0 while on web
it respect that there is available space and static component has defined size.

How web supports when there is no enough space?

I've created a snack which helps to illustrate how it works on web
https://snack.expo.dev/@matew/eager-yellow-tortilla

Screen shoot

![Image](https://github.com/user-attachments/assets/54106c9f-1c35-4cd1-b3bf-7bd7e5e3e8b4)

Hello, I've noticed discrepancy between yoga and web(chrome and safari tested) behaviour. Its very easy to notice that on snack https://snack.expo.dev/@matew/yoga-rendering-issue | iOS | Android | Web | | --- | --- | --- | | ![Image](https://github.com/user-attachments/assets/b934a6b1-dcd6-4145-8f0c-c699c49e2624) | ![Image](https://github.com/user-attachments/assets/52d23af8-17d3-4b00-9b9a-57769cffe624) | ![Image](https://github.com/user-attachments/assets/6f1bdc02-2bf4-4500-9df8-f0bdade40e81) | **Summary** To make it easier lets assume the following: `container` - is the first component with no height and flex set `flex wrapper` - is `container` child which has flex set and border defined `static component` - is `flex wrapper` child which has static size (50x50) As you may notice on above screenshot for mobile devices `border` applied on `flex wrapper` is just squeezed and overlaps with `static component` In that situation yoga set that `flex wrapper` size to 0 while on web it respect that there is available space and `static component` has defined size. **How web supports when there is no enough space?** I've created a snack which helps to illustrate how it works on web https://snack.expo.dev/@matew/eager-yellow-tortilla <details> <summary>Screen shoot</summary> ![Image](https://github.com/user-attachments/assets/54106c9f-1c35-4cd1-b3bf-7bd7e5e3e8b4) </details>

NickGerleman commented

2025-02-14 12:00:32 -08:00

(Migrated from github.com)

Yoga/RN has documented behavior where flex: 1 unlike web means flexGrow: 1, flexShrink: 1. You will see same behavior if you set this in web.

This is super weird behavior, that RN web does not try to emulate, but around forever. UseWebDefaults in Yoga IIRC changes this, but has its own wide set of problems, because it doesn't set everything to web defaults, because the flag was added before Yoga supported many of these defaults (not very forward looking...).

Would recommend using flexGrow and flexShrink explicitly.

Yoga/RN has documented behavior where `flex: 1` unlike web means `flexGrow: 1`, `flexShrink: 1`. You will see same behavior if you set this in web. This is super weird behavior, that RN web does not try to emulate, but around forever. `UseWebDefaults` in Yoga IIRC changes this, but has its own wide set of problems, because it doesn't set everything to web defaults, because the flag was added before Yoga supported many of these defaults (not very forward looking...). Would recommend using `flexGrow` and `flexShrink` explicitly.

MateWW commented

2025-02-24 09:51:12 -08:00

(Migrated from github.com)

Thats interesting! 🤔

Thank you for explaining that! 🙏
I will open an issue inside react-native-web to clarify that discrepancy!

Thats interesting! 🤔 Thank you for explaining that! 🙏 I will open an issue inside react-native-web to clarify that discrepancy!

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1787