父级上的 maxheight 会阻止子级上的 Flex Growth 工作

Question

我有一个具有以下结构的组件：

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

相关样式：

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
}

这给了我以下结果：
正如您所看到的，粉色

informationContainer

并未占据

flexGrow

属性指示的组件中的所有剩余空间。

如果我检查检查员是否有足够的空间，请参阅下图：

如您所见，有足够的空间。那么我该如何让粉色容器占据所有可用空间呢？

Answer 1

您可以尝试将

flexGrow: 1

放在

container

风格上吗？