javascript – React Native Views inside Scrollview fit-content height

tudo bem? Estou tendo um probleminha e espero que possam me ajudar a responder.

Eu tenho o seguinte código:

   <View>
      <ScrollView style={styles.scroll} contentContainerStyle={styles.scroll_items} horizontal showsHorizontalScrollIndicator={false}>
        {planos.map(plano => (
          <View key={plano?.PlanoID} style={styles.card}>
            <View style={styles.plano_conteudos_wrapper}>
              <Text style={styles.nome_plano}>{ plano?.PlanoNome }</Text>

              <View style={styles.items_wrapper}>
                { plano?.Itens?.map(item => (
                  <Text key={item} style={styles.item_texto}>- { item }</Text>
                ))}
              </View>
            </View>

            <View style={styles.plano_valores_wrapper}>
              {plano?.Valores?.map(vigencia => (
                <View key={vigencia?.PlanoVigenciaID} style={styles.valor_wrapper}>
                  <Text style={styles.vigencia}>{ vigencia?.VigenciaDescricao }</Text>
                  <Text style={styles.valor}>{ vigencia?.VigenciaValor }</Text>
                </View>
              ))}
            </View>

            <TouchableOpacity style={styles.botao} onPress={() => {}}>
              <Text style={styles.botao_texto}>
                Adquirir
              </Text>
            </TouchableOpacity>
          </View>
        ))}
      </ScrollView>
    </View>

Style

card: {
    marginRight: 15,
    width: 350,
    marginTop: 20,
    marginHorizontal: 15,
    backgroundColor: '#FFF',
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,

    elevation: 6,
    
    justifyContent: 'space-between',
  },
  plano_conteudos_wrapper: {
    width: '100%',
    borderBottomWidth: 1,
    borderBottomColor: '#a3a3a3'
  },
  nome_plano: {
    fontSize: 22,
    fontFamily: 'Medium',
    padding: 15,
    textTransform: 'uppercase',
  },
  items_wrapper: {
    marginHorizontal: 40,
    marginBottom: 20
  },
  item_texto: {
    fontSize: 18,
    fontFamily: 'Regular'
  },
  plano_valores_wrapper: {
    width: '80%',
    marginVertical: 10,
    alignItems: 'center',
    alignSelf: 'center'
  },
  valor_wrapper: {
    marginVertical: 10,
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingBottom: 5,
    borderBottomWidth: 1,
    borderBottomColor: '#c4c4c4'
  },
  vigencia: {
    fontSize: 18,
    textTransform: 'uppercase'
  },
  valor: {
    fontSize: 18,
    color: 'green'
  },
  botao: {
    maxWidth: '80%',
    minWidth: '50%',
    padding: 10,
    backgroundColor: '#652468',
    borderRadius: 5,
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
    marginBottom: 20
  },
  botao_texto: {
    fontSize: 18,
    textTransform: 'uppercase',
    color: '#FFF'
  }
});

Isso imprime o seguinte resultado:

Screenshot 1

Screenshot 2

Qual o problema? O tamanho da Scrollview está respeitando o tamanho do maior card, porém por algum motivo, todos os outros cards estão com um height de 100% da Scrollview sendo que não quero isso, quero que cada Card tenha um height “fit-content” para cada card ter seu próprio tamanho e ocupar somente o que precisa.

Como fazer isso?