水平ScrollView的自动高度？

Question

我有一个内部具有水平滚动视图的组件，但是有没有办法让ScrollView自动缩放到正确的高度？

此刻，我的组件看起来像这样：

  return (
    <View>
      <Text style={{fontWeight: 'bold', fontSize: 15, marginLeft: 25}}>
        Upcoming Classes
      </Text>
      {upcoming.length > 0 ? (
        <ScrollView
          horizontal
          style={styles.scroll}
          contentContainerStyle={{flexGrow: 1}}>
          {upcoming.map(u => {
            return <MiniCard lesson={u} key={u.key} />;
          })}
        </ScrollView>
      ) : (
        <Text>No Upcoming Classes</Text>
      )}
    </View>
  );
}
const styles = StyleSheet.create({
  scroll: {
    width: '100%',
    paddingLeft: 5,
  },
});

MiniCard是：

function MiniCard({lesson}) {
  return (
    <View style={styles.card} key={lesson.key} >
      <SafeAreaView style={styles.absolute}>
        <View style={styles.row}>
          <Image source={getImage(lesson.name)} style={styles.images} />
          <View style={styles.detail}>
            <Text style={{fontWeight: 'bold'}}>{lesson.name}</Text>
            <Text style={{fontSize: 12}}>
              {lesson.venue} @ {lesson.startTime} {lesson.day}
            </Text>
          </View>
        </View>
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  detail: {
    marginLeft: 10,
  },
  images: {
    width: 40,
    height: 40,
    borderRadius: 5,
  },
  absolute: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    margin: 10,
  },
  card: {
    flex: 1,
    padding: 0,
    marginLeft: 20,
    marginTop: 20,
    borderRadius: 15,
    marginRight: 15,
    backgroundColor: '#fff',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.32,
    shadowRadius: 5.46,
    elevation: 9,
  },
});