flex: 1 overrides the parent's flex-basis to 0 when it should be the content height #12200
Description
flex: 1 sets flex-basis: 0 implicitly. However, in the web, when that happens in an inner node, that is only used for the flex-basis of that node. The final size of the node is still used for flex-basis: auto of the outer node.
The effect is that in this scenario React Native treats this large paragraph as flex-basis: 0...
<View style={{
top: 100,
width: 300,
height: 300,
flexDirection: 'column',
backgroundColor: '#000',
}}>
<Text style={{ flexGrow: 1, backgroundColor: '#c00' }}>
Hello world
</Text>
<View style={{ flexGrow: 1, flexDirection: 'column', backgroundColor: '#0c0' }}>
<View style={{ flex: 1 }}>
<Text style={{ backgroundColor: '#0c0' }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Text>
</View>
</View>
</View>
Equivalent HTML/CSS for the web treats it as flex-basis: content.
<div style="
position: relative;
display: flex;
top: 100px;
width: 300px;
height: 300px;
flex-direction: column;
background-color: #000;
">
<div style="flex-grow: 1; background-color: #c00">
Hello world
</div>
<div style="flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; background-color: #0c0">
<div style="flex: 1; overflow: hidden; display: flex;">
<div style="background-color: #0c0; overflow: hidden;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
If you remove flex: 1 from the example, it works as expected.
Tested in master. I believe this might be a bug in Yoga but not sure if there are other defaults that are not propagating correctly.