Stop FlatList from overflowing containing View?

Question

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.

This is React Native Web.

Answer 1

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.