#1409·yoga

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):

image

Expected (1 and 2 should shrink):

image

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:

typescript
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:

xml
<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.