flex with non flex wraper do not respect children size

[MateWW]

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


[NickGerleman]

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.