maxheight on parent prevents flex grow on child from working

I have a component with the following structure:

<View style={styles.container}><LoyaltyCard {...cardData} onPress={onCardDetails} style={styles.card} /><ScrollView style={styles.informationContainer}><LoyaltyCardInformation style={styles.information} storeId={storeId} /></ScrollView><TextButton title={"Add Card"} onPress={onAddCard}></TextButton></View>

with the associated styles:

container: {    minHeight: 0,    maxHeight: "60%",    flexDirection: "column"},card: {    zIndex: 2},informationContainer: {    marginTop: -15,    marginBottom: -15,    flexGrow: 1,    // height: 300,    padding: 15,    backgroundColor: "#f0f"},information: {    paddingTop: 15,    paddingBottom: 15}

this gives me the following result:
As you can see the pink informationContainer doesnt take up all the left over space in the component indicated by the flexGrow property.

If I check the inspector to see if there is enough space I see there is, see following picture:

As you can see there is enough space. So How do i make the pink container take up all the available space?