嘿，这个问题我在React Native开发中也碰到过，来帮你分析和解决～

当你给ScrollView的contentContainerStyle设置flex:1时，这个样式的作用是让内容容器占满父容器的可用空间，但有个前提：ScrollView本身必须有明确的高度约束。如果ScrollView的父容器没有设置高度或者也是flex:1但没有被上层容器限制，那么ScrollView会因为没有高度参考，导致内容容器无法撑开，最终整个ScrollView连带着内部内容一起消失了。

而设置固定高度时能正常显示，是因为你给ScrollView明确了高度，内容容器的flex:1就有了可以依托的空间。

根据你的场景，有几种常见的处理方式，亲测有效：

1. 给ScrollView的父容器添加高度约束 #

如果ScrollView的父组件是一个View，给这个View设置flex:1（让它撑满屏幕或上层容器的可用空间），这样ScrollView就能获取到明确的高度参考：

<View style={{flex: 1}}> {/* 父容器撑满可用空间 */}
  <ScrollView contentContainerStyle={{flex: 1}} showsVerticalScrollIndicator={false}>
    <View style={{padding: 5}}>
      <Text>search</Text>
    </View>
    <View style={{padding: 5}}>
      <Text>New Matches</Text>
      <ScrollView contentContainerStyle={{flexGrow: 1}} horizontal={true} showsHorizontalScrollIndicator={false}>
        {/* 你的横向滚动内容 */}
      </ScrollView>
    </View>
  </ScrollView>
</View>

2. 用flexGrow:1替代flex:1（更适配ScrollView） #

其实ScrollView的contentContainerStyle更推荐用flexGrow:1而不是flex:1。因为flex是flexGrow、flexShrink、flexBasis的缩写，默认flex:1等于flexGrow:1, flexShrink:1, flexBasis:0%，而flexGrow:1只负责让内容容器在有剩余空间时自动撑开，不会因为父容器高度不确定而导致组件塌陷：

<ScrollView contentContainerStyle={{flexGrow: 1}} showsVerticalScrollIndicator={false}>
  {/* 你的内部内容 */}
</ScrollView>

3. 直接给ScrollView设置style={{flex:1}} #

如果父容器不方便设置flex:1，也可以直接给ScrollView本身设置style={{flex:1}}，让它先撑满父容器的可用空间，再给contentContainerStyle设置flexGrow:1：

<ScrollView 
  style={{flex: 1}}
  contentContainerStyle={{flexGrow: 1}} 
  showsVerticalScrollIndicator={false}
>
  {/* 你的内部内容 */}
</ScrollView>

你代码里嵌套的横向ScrollView也存在同样的风险，建议把它的contentContainerStyle={{flex:1}}改成contentContainerStyle={{flexGrow:1}}，同时确保它的父View（就是包含"New Matches"的那个View）有合适的高度约束，比如设置flex:1或者固定高度，这样横向ScrollView才能正常渲染内容。

内容的提问来源于stack exchange，提问作者Christian Lessard