I am facing an issue with a container that contains a nested scrollview component. Inside this scrollview container, I am iterating through data to display the children in 2 items per row and automatically fill any remaining empty space. However, currently, it is only filling up half of the parent container.
https://i.sstatic.net/HlKTKlKO.png
The goal is to evenly distribute the height of the 6 boxes displayed in the image and fill in the remaining space in the container.
// React Native Element
return (
<SafeAreaView style={[{ flex: 1 }]}>
<ScrollView
contentContainerStyle={surveyScreenStyles().cardsContainer}
>
<View
style={[surveyScreenStyles().cardsContainer]}
>
{surveyData?.surveys?.map((surveyDetails, i) => (
<Card
key={`suvey-card-${i}`}
mode='elevated'
style={[surveyScreenStyles().cards]}
>
<Card.Title
title={surveyDetails.name}
titleVariant='titleLarge'
subtitle={surveyDetails.summary}
subtitleNumberOfLines={2}
/>
</Card>
))}
</View>
</ScrollView>
</SafeAreaView>
);
}
// css file
{
cardsContainer: {
backgroundColor: "#FFFFFF",
justifyContent: 'space-evenly',
flex: 1,
flexWrap: 'wrap',
flexDirection: 'row',
padding: 5,
gap: 10
},
cards: {
backgroundColor: "#FFFFFF",
borderRadius: 10,
flexBasis: '45%',
justifyContent: 'center',
padding: 10,
}
}