Yoga does not respect automatic minimum size for flexbox items

Description

Actual (all items are equal width):

Expected (1 and 2 should shrink):

React Native Version

0.72.4

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: 19.21 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: AI-222.4459.24.2221.9971841
  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.4
    wanted: 0.72.4
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

React Native:

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

const item = {
  flexGrow: 1,
  flexShrink: 1,
  flexBasis: '100%',
};

export default function App() {
  return (
    <View style={{ display: 'flex', flexDirection: 'row' }}>
      <View style={[{ backgroundColor: 'red' }, item]}><Text>1</Text></View>
      <View style={[{ backgroundColor: 'green' }, item]}><Text>2</Text></View>
      <View style={[{ backgroundColor: 'blue' }, item]}><Text style={{ minWidth: '100%' }}>33333333333333333333</Text></View>
    </View>
  );
}

Web equivalent:

<style>
body {
  background-color: black;
  color: white;
  font-weight: bold;
  font-size: 24px;
  margin: 0;
}

/* React Native */
/*
* {
  min-width: 0px;
  overflow-wrap: break-word;
}
*/

.f {
  display: flex;
  text-align: center;
}

.r, .g, .b {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100%;
}

.r {
  background-color: hsl(0deg, 50%, 20%);
}

.g {
  background-color: hsl(90deg, 50%, 20%);
}

.b {
  background-color: hsl(45deg, 50%, 20%);
}

.txt {
  min-width: 100%;
}
</style>

<div class="f">
  <div class="r">1</div>
  <div class="g">2</div>
  <div class="b">
    <div class="txt">
      3333333333333
    </div>
  </div>
</div>

Snack, screenshot, or link to a repository

Repro has been provided above.

Start by running the React Native reproduction in the issue and compare its layout with the provided web equivalent. Trace Yoga's flexbox sizing path for flexGrow, flexShrink, flexBasis, and the child's minWidth, then verify that the first two items shrink as shown in the expected result.