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