You have to specify a value for flex-basis as well (not specifying this property causes behaviour similar to using the initial value, auto). Add flex-basis: 0; to both children or just set it with the shorthand: .flex-item { flex: 1; /* flex-basis is 0 if omitted */ } .big { flex-grow: 3; }
Here’s some test code to consider: render() { return <View style={{flex: 1,backgroundColor: “cornflowerblue”}}> <View style={{backgroundColor: “chartreuse”}}><Text>Nothing (17px)</Text></View> <View style={{flex: 0, backgroundColor: “yellow”}}><Text>flex: 0 (17px)</Text></View> <View style={{flex: 0, flexBasis: 10, backgroundColor: “brown”}}><Text>flex: 0, flexBasis: 10 (10px)</Text></View> <View style={{flex: 0, flexGrow: 1, backgroundColor: “orange”}}><Text>flex: 0, flexGrow: 1 (97px)</Text></View> <View style={{flex: 0, flexShrink: 1, backgroundColor: “tan”}}><Text>flex: 0, flexShrink: … Read more