Skip to content

Layout: alignItems and maxHeight incompatibility #18777

Closed
@pstanton

Description

@pstanton

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions