Yoga does not respect automatic minimum size for flexbox items
Author: szmarczakCreated Sep 27, 2023Updated Jun 8, 2026
LabelsAlgorithm
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 foundSteps 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.
Source: react/yoga