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:

    
        

            
                {header}
                
                    
                
            

            

            
                  onItemSelect(item.item)}>
                            {item.item}
                        }>
                                    
            
        
    

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?