`flex:0` still does not respect element size

[joebochill]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the issue

When using flex:0 in a React Native component, the translated styles in the web apply a flexBasis: 0% which causes elements to not respect their intrinsic size.

Refer to these related issues:

• https://github.com/necolas/react-native-web/issues/1792
• https://github.com/necolas/react-native-web/issues/1264
• https://github.com/necolas/react-native-web/issues/1604

This PR looks like it would have fixed the issue, but it was never merged: https://github.com/necolas/react-native-web/pull/1265

Expected behavior

To match RN behavior, flex:0 should map to flex: 0 0 auto, or at least flexBasis should be 'auto'.

Steps to reproduce

• Place a flex:0 view with a fixed height inside of a flex container. Observe that the element is collapsed down to 0 height (instead of it's specified height) and is invisible.

    <View style={{ flex: 1, backgroundColor: "red" }}>
      <View style={{ flex: 1, backgroundColor: "blue" }} />
      <View style={{ flex: 0, height: 50, backgroundColor: "orange" }} />
      <View style={{ flex: 1, backgroundColor: "green" }} />
    </View>

Test case

https://codesandbox.io/p/sandbox/funny-goldstine-9tqmq9?file=%2Fsrc%2FApp.js%3A7%2C38

Additional comments

No response

[necolas]

The previous discussions and commits explain why there is no "fix" for this issue RNfWeb. What RNfWeb does today is what the browsers do. The bug is in React Native's non-standard implementation of flexbox, which the RN team is working to align with W3C standards.