Incorrect `flexGrow` behavior inside `<ScrollView contentContainerStyle={{ flexGrow: 1 }}>`

Description

Android (incorrect):

Note different heights.

Web (correct):

React Native Version

0.72.5

Output of npx react-native info

> npx react-native info
info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.22621
  CPU: "(12) x64 AMD Ryzen 5 5600 6-Core Processor              "
  Memory: 18.43 GB / 31.91 GB
Binaries:
  Node:
    version: 20.2.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 9.7.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.5.33424.131 (Visual Studio Community 2022)
Languages:
  Java:
    version: 11.0.20.1
    path: C:\Program Files\Eclipse Adoptium\jdk-11.0.20.101-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.5
    wanted: 0.72.5
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

import { Text, View, ScrollView } from 'react-native';

export default function App() {
  return (
			<>
      <View style={{ position: 'absolute', left: 20, height: 150 }}>
			<View style={{ flexGrow: 1 }}>
				<View style={{ width: 300, flexGrow: 1 }}>
					{[['foo', 'bar'],['baz','A very long but very very long sentence']].map((row, index) => (
						<View style={{ flexDirection: 'row', backgroundColor: index === 0 ? 'red' : 'blue', flexBasis: 0, flexGrow: 1 }} key={index}>
							{row.map((answer) => (
								<Text key={answer} style={{ flexBasis: 0, fontSize: 16,  flexGrow: 1 }}>{answer}</Text>
							))}
						</View>
					))}
				</View>
			</View>
			</View>

      <View style={{ height: 150 }}>
        <ScrollView  contentContainerStyle={{ flexGrow: 1 }}>
          <View style={{ width: 300, flexGrow: 1 }}>
            {[['foo', 'bar'],['baz','A very long but very very long sentence']].map((row, index) => (
              <View style={{ flexDirection: 'row', backgroundColor: index === 0 ? 'purple' : 'orange', flexBasis: 0, flexGrow: 1 }} key={index}>
                {row.map((answer) => (
                  <Text key={answer} style={{ flexBasis: 0, fontSize: 16,  flexGrow: 1 }}>{answer}</Text>
                ))}
              </View>
            ))}
          </View>
        </ScrollView>
			</View>
      </>
  );
}

Use an Android device.

Snack, screenshot, or link to a repository

https://snack.expo.dev/@szmarczak/mad-orange-apple

Start with the linked Expo Snack and the provided reproduction on an Android device, comparing its flexGrow layout with the web result shown in the report. Trace the ScrollView and contentContainerStyle behavior involved; done means the Android layout handles flexGrow consistently with the expected result and the reproduction no longer shows the differing heights.