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

Bắt đầu với Expo Snack được liên kết và bản tái hiện được cung cấp trên một thiết bị Android, so sánh bố cục flexGrow của nó với kết quả web được hiển thị trong báo cáo. Truy vết hành vi liên quan của ScrollView và contentContainerStyle; công việc được xem là hoàn tất khi bố cục Android xử lý flexGrow nhất quán với kết quả mong đợi và bản tái hiện không còn hiển thị các chiều cao khác nhau.