尝试使用flexGrow：1代替Flex：1 in scrollView内容容器样式如下。

<ScrollView contentContainerStyle={{ flexGrow: 1, borderColor: 'green', borderWidth: 5 }}>
  <View style={styles.box1} />
  <View style={styles.box2} />
  <View style={styles.box1} />
</ScrollView>

https://snack.expo.io/HkkEVoh6Z

我相信你的问题是你告诉ScrollView在flex=1时占据所有可用空间，但问题是ScrollView的工作方式不同。它会自动呈现它的所有子元素，所以它在flex下的工作方式不同。这就是与普通ListView或FlatList的区别，后者的性能更好。
我相信这种零食解决了这个问题：https://snack.expo.io/SkxN9GOT-
基本上，我是根据（screenHeight -红框的当前高度）获取设备的高度并将ScrollView设置为固定高度。

最好的方法是将ScrollView Package 在View中并使用Flex控制该视图，滚动视图将跟随。
这是一个小例子

<View style={{flex: 1, flexDirection: 'column',}}>

          <View style={{flex:5, backgroundColor : 'green' }}>
            <ScrollView style={{margin:50, backgroundColor : 'pink' }}>

              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>

            </ScrollView>
          </View>

          <View style={{flex:1, backgroundColor : 'blue' }}>
              <Text> Hello Static View </Text>
          </View>

</View>

这个answer已经提供了实现方法。
但是这里有一个解释，为什么你不能用你的方法来做。
应用于滚动视图内容容器，该内容容器 Package 所有子视图。
因此，当您将flex: 1应用于contentContainer时，它会将ScrollView的整个高度（高度也是flex: 1）作为其父项View。
你也可以模拟-
能够放下红色容器以向上推上部箱子
通过向ScrollView添加父项并在父项中应用样式

<View style={styles.root}>
  <View style={{ flex: 1, borderColor: 'green', borderWidth: 5 }}>
    <ScrollView>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box1} />
    </ScrollView>
  </View>
  <View style={{ height: this.state.height, backgroundColor: 'red' }}>
    <TouchableOpacity onPress={() => this.setState({ height: this.state.height + 10 })}>
      <Text>Click</Text>
    </TouchableOpacity>
  </View>
</View>

试试这个，它会100%解决你的问题

import React, { Component } from 'react';
import { AppRegistry, View,ScrollView } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      <View style={{ flex: 1,flexDirection: 'column' }}>
        <View style={{   height: 50, backgroundColor: 'powderblue'}} />
        <View style={{  flex: 1,  backgroundColor: 'skyblue'}} >
            <ScrollView>

<View style={{  flexDirection: 'column' , minHeight: 'fit-content'}} >
 <View style={{    height:150, backgroundColor: 'red'}} />
    <View style={{ minHeight: 'fit-content', backgroundColor: '#fe3222' }} />      

 <View style={{    height:150, backgroundColor: '#fff222'}} />
    <View style={{    height:150, backgroundColor: '#555222'}} />           
              </View>

  </ScrollView>
 </View>
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

flex:1等于flexGrow:1 flexShrink:1 flexBasis:0;
flexGrow:1等于flexGrow:1 flexShrink:0 (default value) flexBasis:0。
因此，设置flex:1会使ScrollView内容收缩到其父级，因此不可滚动。