Menu
I'm new to React Native, so I apologize if this is a simple question. I'm trying to achieve a flex layout containing two child flex containers with their own content, where if one child's content overflows, the other child shrinks.
I achieved what I wanted using regular html/css:
No content overflow
With content overflow
but when I reproduced the same elements/styling in React Native, the other child doesn't shrink like I want it to:
No shrinking on content overflow
Can anyone explain why these two are different? And how I could implement it correctly in React Native?
Here is how I implemented it using plain HTML/CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 300px;
height: 600px;
display: flex;
align-items: center;
flex-direction: column;
border: 2px solid black;
padding: 30px;
}
.flexChild{
padding: 15px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}
.child1Content {
border: 3px solid purple;
height: 100px; /* CHANGE TO 400px FOR OVERFLOW */
width: 300px;
}
.child2Content {
border: 3px solid purple;
height: 100px;
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="flexChild">
<div class="child1Content"></div>
</div>
<div class="flexChild">
<div class="child2Content"></div>
</div>
</div>
</body>
</html>
And here's my React Native version:
import { SafeAreaView, StyleSheet, View } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.flexChild}>
<View style={styles.child1Content}>
</View>
</View>
<View style={styles.flexChild}>
<View style={styles.child2Content}>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
alignSelf: 'center',
marginTop: 100,
width: 300,
height: 600,
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
paddingTop: 30,
borderWidth: 2,
borderStyle: 'solid',
borderColor: 'black',
},
flexChild: {
padding: 15,
flex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderWidth: 1,
borderStyle: 'solid',
borderColor: 'black',
},
child1Content:{
borderWidth: 3,
borderStyle: 'solid',
borderColor: 'purple',
height: 100, // CHANGE TO 400px FOR OVERFLOW
width: 300,
},
child2Content:{
borderWidth: 3,
borderStyle: 'solid',
borderColor:
width: 300,
}
});
export default App;
796
asked Feb 01 '26 07:02
Styling in React Native diverges from web in a bunch of ways (and sometimes, between platforms also).
One of these is that a set dimension (your height) overrides flex: 1. Also, setting views of two siblings to flex: 1 forces the siblings to the same size. Using flexGrow: 1 instead considers the dimensions of the inner content when sizing the View.
Other changes:
display: 'flex' and flexDirection: 'column' are defaults in React NativealignSelf: 'stretch' to expand the views horizontallyI put it in a snack to make it easier to experiment with it.
import { SafeAreaView, StyleSheet, View } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<View style={[styles.flexChild, styles.flexChild1]}>
<View style={styles.child1Content}/>
</View>
<View style={styles.flexChild}>
<View style={styles.child2Content} />
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black',
padding: 15,
},
flexChild: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'yellow',
padding: 15,
},
flexChild1: {
backgroundColor: 'orange',
},
child1Content: {
alignSelf: 'stretch',
backgroundColor: 'purple',
height: 400, // CHANGE TO 400px FOR OVERFLOW
},
child2Content: {
alignSelf: 'stretch',
height: 100,
backgroundColor: 'indigo',
},
});
export default App;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
