Search code examples
reactjsreact-nativeexporeact-native-webexpo-web

Stop FlatList from overflowing containing View?


Edit: Snack repro: https://snack.expo.dev/hwTTY2tQm

How do you make a FlatList stop expanding beyond its enclosing view and become scrollable while still taking all (legal) space in the enclosing view?

So far setting height to a specific number worked, but setting height to "100%" still overflows, setting flex:1 still overflows.

Screenshot

This is React Native Web.


Solution

  • For flexbox to work correctly flex:1 must be maintained for every enclosing view up the hierarchy. One of my views didn't have flex:1.