title: alignItems: 'flex-end' doesn't work properly (it doesb't cover the whole page) - react native
body: <p>So in my homepage I have 4 buttons which I've laid out with flex. I've set the parent's flex: 1, which means it's covering the whole page (I've made sure of that with backgroundColor). My problem is that when I set alignItems: 'flex-end', the buttons only move down a little, as if the flex is covering only half the page.</p>
  
  <p>Here's my code Mark-up:</p>
  
  <pre><code>&lt;Card style={styles.cardStyle}&gt;
        &lt;CardSection style={styles.containerStyle}&gt;
          &lt;Button onPress={() =&gt; navigate("NewScreen")}&gt;
            New
          &lt;/Button&gt;
        &lt;/CardSection&gt;
  
        &lt;CardSection style={styles.containerStyle}&gt;
          &lt;Button onPress={() =&gt; navigate("SavedScreen")}&gt;
            Saved
          &lt;/Button&gt;
        &lt;/CardSection&gt;
  
        &lt;CardSection style={styles.containerStyle}&gt;
          &lt;Button onPress={() =&gt; navigate("ParametersScreen")}&gt;
            Settings
          &lt;/Button&gt;
        &lt;/CardSection&gt;
  
        &lt;CardSection style={styles.containerStyle}&gt;
          &lt;Button onPress={() =&gt; navigate("FMRScreen")}&gt;
            FMR
          &lt;/Button&gt;
        &lt;/CardSection&gt;
  
      &lt;/Card&gt;
  </code></pre>
  
  <p>Card Style:</p>
  
  <pre><code>cardStyle: {
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      justifyContent: 'space-around',
      alignItems: 'center',
      backgroundColor: '#0000ff',
  }
  </code></pre>
  
  <p>CardSection style:</p>
  
  <pre><code>containerStyle: {
      borderBottomWidth: 1,
      padding: 5,
      backgroundColor: '#fff',
      borderColor: '#ddd',
      height: 150,
      width: 150,
      borderRadius: 20,
      marginTop: 10,
  },
  </code></pre>
  
  <p>And the style for the items:</p>
  
  <pre><code>textStyle: { 
      color: '#007aff',
      fontSize: 20,
      fontWeight: '600',
  },
  buttonStyle: {
      backgroundColor: 'rgba(255, 255, 255, 0)',
      borderWidth: 0,
      borderColor: '#007aff',
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
  },
  </code></pre>
  
  <p>And this is what I get:</p>
  
  <p><a href="https://i.stack.imgur.com/eagBV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eagBV.png" alt="enter image description here"></a></p>
  
  <p>Note that this problem goes away if I remove flexWrap: 'wrap', but I can't do this!</p>
  
  <p>Any ideas?</p>