React Native Paper - flex view bleeding views downwards

I want to display a fullscreen picker, which contains a header and a list. Currently my view hierarchy, starting at the Portal, looks like following:

<Portal>
    <Modal 
        visible={visible} 
        onDismiss={onDismiss} 
        dismissable={true}
        dismissableBackButton={true} 
        contentContainerStyle={editorPickerStyles.modalRoot}>
        <View style={editorPickerStyles.modalContainer}>

            <View style={editorPickerStyles.modalHeader}>
                <Text style={editorPickerStyles.modalHeaderText}>{header}</Text>
                <Button compact={true} style={editorPickerStyles.modalCloseButton} onPress={onDismiss}>
                    <Icon source="close" size={24} color={paperTheme.colors.onPrimary} />
                </Button>
            </View>

            <Divider />

            <View style={{ backgroundColor: "#ff00ff"}}>
                <FlatList data={items} renderItem={item => <TouchableRipple                                         
                            rippleColor={paperTheme.colors.primary} 
                            style={editorPickerStyles.modalItem} 
                            onPress={() => onItemSelect(item.item)}>
                            <Text style={editorPickerStyles.modalItemText}>{item.item}</Text>
                        </TouchableRipple>}>
                </FlatList>                    
            </View>
        </View>
    </Modal>
</Portal>

These are appropriate styles, I have added colors to mark areas occupied by specific views:

modalRoot: {
    padding: 32,
    display: 'flex',
    flexDirection: 'column',
    height: '90%'   
},    
modalContainer: {          
    flex: 1,      
    padding: 8,
    display: 'flex',
    height: '100%',
    flexDirection: 'column',
    backgroundColor: "#ff0000"
},
modalHeader: {        
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    padding: 8,
    backgroundColor: "#00ff00"
},
modalHeaderText: {
    flexGrow: 1,
    fontSize: 22
},
modalCloseButton: {
    width: 48,
    height: 48,
    padding: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: paperTheme.colors.primary,
    color: paperTheme.colors.onPrimary,
    borderRadius: 24,
},
modalList: {
    backgroundColor: "#0000ff"
},
modalItem: {
    padding: 8,
},
modalItemText: {
    fontSize: 22
}

No matter what I do, the red container (modalContainer) bleeds the list downwards. Depending on the styles, the list is either not constrained at all and extends towards bottom of the screen, or has its height increased by the height of the header.

I tried a lot of options, including setting percentage-based heights and with trial-and-error I am able to set the values that make the list stay inside its container, but such solution is unreliable and may cause problems on screens with different resolutions. Initially I also used ScrollView instead of the list, with same results.

What am I doing wrong? Why the list exceeds its container, even though it should be controlled by flex?