How prevent React Native FlatList height from changing when the content changes?

I have a main View with a top view and a bottom view, in the following flex configuation:

container view: flex 1 (fills the whole height)   -header view: flex 1 (fills 25% of the container)   -bottom view: flex 3 (fills 75% of the container)

The bottom view contains a FlatList.

The problem is that the layout changes when the amount of items in the FlatList changes. The flatlist starts with 3 items, then it looks ok. When the amount of items changes to 20, the height becomes too high and the flatlist height + header height become higher than the screen height.

I want the flatlist to keep the same height regardless of how many items are in the list.

React native view:

<View style={styles.container}><View style={styles.topblock}><Text>a list</Text></View><View style={styles.bottomblock}><FlatList            style={styles.liststyle}            data={mycooldata}            renderItem={createListItem}            keyExtractor={item => item.name}          /></View></View>

the list item

const createListItem = ({ item }) => (<View style={styles.item} ><Text style={styles.title} >{item.title}</Text></View>)

And the CSS

const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: 'lightgrey',    marginTop: StatusBar.currentHeight || 0,  },  topblock:{    flex:1,    backgroundColor: 'lightblue',  },  bottomblock:{    flex:3  },  liststyle:{    backgroundColor:'lightgreen',    height:'100%' // also tried flex 1 or leaving it out entirely  },  item: {    backgroundColor: 'rgb(150,150,250)',    padding: 8,  },  title: {    fontSize: 14,  },});