ScrollView with flex 1 makes it un-scrollable

Question

I'm trying to run flex on a ScrollView, and as long as the ScrollView has flex: 1 the scroll inside does not work. here is the expo fiddle (that you can run this code and play with) https://snack.expo.io/SySerKNp-

note that if you remove the flex: 1 from the ScrollView it does let scroll but then you lose the flex power ( the ability to let the red container down to push up the upper box (the ScrollView) ) so I must have a flex there.

p.s - I'm working only on android, and I haven't tested it on iPhone( I don't mind the result there )

any idea what am I missing ? why the ScrollView won't function right when it has a flex: 1 ? thanks !

Answer 1

Try using flexGrow: 1 instead of flex: 1 in scrollView content container style as follows.

<ScrollView contentContainerStyle={{ flexGrow: 1, borderColor: 'green', borderWidth: 5 }}>
  <View style={styles.box1} />
  <View style={styles.box2} />
  <View style={styles.box1} />
</ScrollView>

https://snack.expo.io/HkkEVoh6Z