ScrollView item width overflows screen width with alignItems flex-start

[pybuche]

Description

While trying to craft a "self-positioning" component, I realized that alignItems: flex-start on a ScrollView makes the items width exceed the screen width, creating quite a huge overflow and an unwanted (and unspecified on the code) horizontal scroller.

Expected behavior	Current behavior

On the second screenshot, the green square is accessible by scrolling horizontally.

React Native version:

System:
 OS: macOS 11.1
 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
 Memory: 34.18 MB / 16.00 GB
 Shell: 5.8 - /bin/zsh
 Binaries:
 Node: 14.15.4 - /var/folders/2r/hkgm75rx51b8zkktpg8xtz680000gn/T/yarn--1621456290631-0.7507476339281771/node
 Yarn: 1.19.0 - /var/folders/2r/hkgm75rx51b8zkktpg8xtz680000gn/T/yarn--1621456290631-0.7507476339281771/yarn
 npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm
 Watchman: Not Found
 Managers:
 CocoaPods: 1.10.0 - /Users/pybuche/.gem/bin/pod
 SDKs:
 iOS SDK:
 Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
 Android SDK: Not Found
 IDEs:
 Android Studio: Not Found
 Xcode: 12.5/12E262 - /usr/bin/xcodebuild
 Languages:
 Java: 15.0.2 - /usr/bin/javac
 Python: 2.7.16 - /usr/bin/python
 npmPackages:
 react: 16.13.1
 react-native: 0.63.4

Steps To Reproduce

1. Use the provided demo code

    <View
    style={{
    paddingTop: 80,
    backgroundColor: "red",
    height: 100,
    // alignItems: "flex-start",
    justifyContent: "flex-start",
    flexGrow: 1,
    }}
    >
    <ScrollView>
    <View
    style={{
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: "yellow",
    height: 50,
    width: "100%",
    }}
    >
    {/* This blue square is on the left edge of the phone */}
    <View style={{ backgroundColor: "blue", width: 20, height: 20 }} />
    {/* This green square is on the right edge of the phone */}
    {/* When the top container "alignitems" is set to flex-start, it goes way farther than the right edge of the screen */}
    <View style={{ backgroundColor: "green", width: 20, height: 20 }} />
    </View>
    </ScrollView>
    </View>

2. Comment/uncomment the alignItems: flex-start line on the top container's style
3. When present, the yellow view takes way too much horizontal space. It's fixable with a width: 100% on the FlatList

Expected Results

If nothing's wrong with the code, when ScrollView is unstyled, its content should not exceed screen width ie:

• With unstyled View, take minimal space
• With View styled with width: 100%, take 100% of the screen width

Snack, code example, screenshot, or link to a repository:

Here's a snack link to test it out!

I found a similar issue here: #14815, but doesn't have a concrete solution.

Note that there are plenty of way to "dirty fix" this:

• Not filling alignItems
• Setting width: 100% to the ScrollView
• Probably tons of other ways

The point here is to report the bug, because we wanna be able to parametrize those positioning props to be able to ship a "Layout" component super simple to use for us. 🙏

[turker0]

+1, also flex:1 container items not working properly with horizontal scrollview. First item exceeds screen width.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.