title: Child Elements with same width in horizontal ScrollView with FlexBox
body: <p>Target platform: IOS</p>
  <p>I have a ScrollView within a SafeAreaView. Within the ScrollView I have x child elements (TouchableOpacity if that matters). These child elements also have exactly 1 children (a Text element).</p>
  <p>The Goal is to align the TouchableOpacities horizontally within the ScrollView. And if I have a lot of TouchableOpacities, the View should be horizontaly scrollable.</p>
  <p>I have accomplished everything mentioned so far and can be seen here:
  <a href="https://snack.expo.dev/@bunga12345/samewidthinscrollview" rel="nofollow noreferrer">Snack</a></p>
  <p>Now I want all the TouchableOpacities to have the same width. I have found the property contentContainerStyle and thought i could use flexGrow: 1... but that does absolutely nothing.</p>
  <p>Is what i want even possible? I dont want to set a minWidth or a fixed with.</p>
  <p>What am I missing here?
  Thanks in advance!</p>
  <pre><code>export default function App() {
    return (
      &lt;SafeAreaView style={styles.safeAreaView}&gt;
        &lt;ScrollView style={styles.scrollView} contentContainerStyle={styles.contentContainer} horizontal={true}&gt;
          &lt;TouchableOpacity style={styles.touchableOpacity}&gt;
            &lt;Text style={styles.text}&gt;short&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;TouchableOpacity style={styles.touchableOpacity}&gt;
            &lt;Text style={styles.text}&gt;slightly more&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;TouchableOpacity style={styles.touchableOpacity}&gt;
            &lt;Text style={styles.text}&gt;short&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;TouchableOpacity style={styles.touchableOpacity}&gt;
            &lt;Text style={styles.text}&gt;a lot of text within the button&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;TouchableOpacity style={styles.touchableOpacity}&gt;
            &lt;Text style={styles.text}&gt;short again&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/ScrollView&gt;
      &lt;/SafeAreaView&gt;
    );
  }
  
  const styles = StyleSheet.create({
    safeAreaView: {
      backgroundColor: &quot;black&quot;,
      height: 100,
    },
    scrollView: {
    },
    contentContainer: {
      backgroundColor: &quot;white&quot;,
    },
    touchableOpacity: {
      backgroundColor: &quot;green&quot;,
      marginHorizontal: 10,
      marginVertical: 10,
    },
    text: {
      fontSize: 18,
      marginHorizontal: 10,
    },
  });
  </code></pre>
  <p><strong>Edit:</strong></p>
  <p>In React native, <a href="https://reactnative.dev/docs/flexbox" rel="nofollow noreferrer">flexbox works differently</a>!</p>
  <p>The following solution works on the web, but not on an ios-device (we are using react-native with expo!)</p>
  <pre><code>  contentContainer: {
      flexGrow: 1, // add this
      backgroundColor: &quot;white&quot;,
    },
    touchableOpacity: {
      flex: 1, // add this
      backgroundColor: &quot;green&quot;,
    },
  </code></pre>
  <p>What else is missing for it to work on IOS?</p>