React Native ScrollView height issues

Question

I would like to create a horizontal ScrollView, but I faced some issues. The ScrollView takes all the remaining space of my screen, but what I want is the ScrollView to only take the height of the biggest children. How can I achieve that?

I have tried to set a fixed height on the style, but that didn't work. Any help?

<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.guessList}>
{guessList.map((guess, index) => (
    <NumberContainer style={styles.guessItem} key={guess}>#{guessList.length - index} {guess}</NumberContainer>
))}

const styles= StyleSheet.create({
guessList: {
    height: 70
},
guessItem: {
    marginRight: 5
}

});

Answer 1

I just tried to add {flexGrow: 0} on the style of ScrollView and now it works. It's only taking the space enough for cotaining the children components.

Answer 2

Like @Vignesh say, this should do the work

<ScrollView contentContainerStyle={{flexGrow: 1} ... >