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.