Description
I've found that maxHeight
is treated as height
when the container has alignItems:"center"
.
Environment
snack.expo.io
Environment:
OS: Windows 10
Node: 9.0.0
Yarn: 1.3.2
npm: 5.5.1
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4408382
Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.0 => 0.53.0
^ however reproduced using snack
Steps to Reproduce
https://snack.expo.io/H1Ww4ctiG
The example i was working on when i noticed the issue is an auto-sizing section which scrolls if more than a certain height.
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'flex-start', backgroundColor:"red" }}>
<View style={{backgroundColor:"orange", maxHeight:200}}>
<ScrollView contentContainerStyle={{backgroundColor:"yellow", flexGrow:0, padding:10}}>
<Text style={{fontSize:18}}>
Some content which could be short or long, in this example it is medium ;)
</Text>
</ScrollView>
</View>
<Text style={{fontSize:18, marginTop:10}}>some more content</Text>
</View>
);
}
^ comment out/delete "alignItems:'center'" and it works
Expected Behavior
orange background should never be visible since the orange view should always bee the height of the child ScrollView. The expected behaviour can bee seen by removing the "alignItems:'center'" in the red view.
Actual Behavior
orange background is visible meaning the view is not shrunk to its content's height when the content is smaller than its 'maxHeight'.