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,
    }
}