extend according to components inside it

In my containerTop, I am rendering a list inside TripOptionsSelectorthat hides towards the end.

I have tried adding marginBottom/paddingBottom to containerOptionsSelectorbut it makes no difference. I don't want to add a height to my because it can vary according to different phones.

How else can I simply extend the View such that the text doesn't hide?

export const MapScreen: React.FunctionComponent = () => {  return (<SafeAreaView style={styles.safeAreaViewContainer}><View style={styles.container}><View style={styles.containerTop}><BackArrow /><JourneyLocationsTextContainer /><View style={styles.containerOptionsSelector}><TripOptionsSelector /></View></View><View style={styles.containerMap}><MapContainer /><ButtonsContainer /></View></View></SafeAreaView>  );};const styles = StyleSheet.create({  safeAreaViewContainer: { flex: 1 },  container: {  flex: 1, backgroundColor: 'white'},  containerTop: { flex: 1, backgroundColor: '#323443' },  containerOptionsSelector: {    marginTop: moderateScale(15),    marginLeft: moderateScale(20),  },  containerMap: {     flex: 2  },});

export const TripOptionsSelector: React.FunctionComponent = () => {  return (<View style={styles.offerContainer}><Text style={styles.offerText}>Jetzt</Text><Text style={styles.offerText}>1 Person</Text><Text style={styles.offerText} >Filter</Text></View>  );};const styles = StyleSheet.create({  offerContainer: {    flexDirection: 'row',  },