React Native make children fill in empty space evenly

I have a container that has a scrollview component nested inside that is also a container. Inside the scrollview container, I am looping through data and then trying to make the children be 2 items per row and also fill in any remaining empty space automatically, however, it will only fill up half the parent container.

I would like the 6 boxes shown in the image to evenly distribute the height 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,    }}