Why is the 'flex' property not working on my ScrollView as expected?

Question

I'm having trouble getting 'scrollView' to take up 8 times the space as 'adContainer', using 'Flex'.
Instead, the screen renders as if both are set to 'Flex: 1', each taking up an equal amount of space.

Code:

const CreateAccountScreen = (props) => {
  return (
    <View style={styles.mainContainer}>
      <ScrollView  style={styles.scrollView}>
        <CreateAccountForm/>
      </ScrollView>
      <View style={styles.adContainer}>
        <Advertisement/>
      </View> 
    </View>        
  );

}

const styles = StyleSheet.create({
mainContainer:{
    flex: 1,
  },
  scrollView: {
    flex: 8
  },
  adContainer: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'black'
  }
})

The ScrollView functions properly, but it isn't taking up the amount of space I would like (8 times that of the adContainer).
I've tried adding a 'View' around the ScrollView, and placing 'Flex: 8' on it.

Code:

const CreateNewAccountScreenA = (props) => {
      return (
        <View style={styles.mainContainer}>
          <View style={styles.scrollViewContainer}>
            <ScrollView style={styles.scrollView} >
              <CreateAccountFormA/>
            </ScrollView>
          </View>
          <View style={styles.adContainer}>
            <Advertisement/>
          </View> 
        </View>        
      );
  }

const styles = StyleSheet.create({
  mainContainer:{
    flex: 1,
  },
  scrollViewContainer: {
    flex: 8
  },
  scrollView: {
    flex: 1
  },
  adContainer: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'black'
  }
})

This does have the effect I would like as far as the amount of space taken up by the 'scrollViewContainer',
however then the ScrollView child inside of it will cease to function properly.

And I'm not sure I understand what 'contentContainerStyle' does on ScrollViews, I tried using that too, however I'm not sure I used it correctly.

Code:

const CreateNewAccountScreenA = (props) => {
      return (
        <View style={styles.mainContainer}>
          <View contentContainerStyle={styles.contentContainer}>
            <ScrollView style={styles.scrollView} >
              <CreateAccountFormA/>
            </ScrollView>
          </View>
          <View style={styles.adContainer}>
            <Advertisement/>
          </View> 
        </View>        
      );
  }

const styles = StyleSheet.create({
  mainContainer:{
    flex: 1,
  },
  contentContainer: {
    flex: 8
  },
  scrollView: {
    flex: 1
  },
  adContainer: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'black'
  }
})

The code above resulted in 'adContainer' taking up the entire space of the screen.
I'm not sure what I'm doing wrong, but any help would be greatly appreciated! Thanks, peace.