title: Prevent alone item going 100% width on FlatList that has 2 columns in React-Native
body: <p>I got a FlatList with <code>numColumns={2}</code>, inside this FlatList, I render a Native-Base Card item. 
  The idea is to have a list of cards and each of those, occupying the 50% of the parent container.
  But I realized that if for example I have 3 items, the item below would occupy the 100% of the width due to <code>flex: 1</code> on the card style.</p>
  
  <p>How can I make the item that is alone to go only up to 50% width no matter what?</p>
  
  <p>This is my code:</p>
  
  <pre><code>render() {
      return (
          &lt;View&gt;
              &lt;FlatList
                  numColumns={2}
                  style={ styles.cardContainer }
                  keyExtractor={ this._keyExtractor }
                  data={ this.state.itemList }
                  renderItem={ this._renderItem }
                  &gt;
              &lt;/FlatList&gt;
          &lt;/View&gt;
      );
  }
  </code></pre>
  
  <p>The styles being applied:</p>
  
  <pre><code>cardContainer: {
      flex: 1,
      flexDirection: 'column'
  },
  
  card: {
      flex: 1,
      margin: 10,
      flexBasis: '50%'
  },
  </code></pre>
  
  <p><code>_renderItem</code> is just a <code>&lt;Card&gt;&lt;/Card&gt;</code> with the <code>style={ card }</code> on it. I can post it if needed as well. But no major styling in there except for the inner elements.</p>
  
  <p>Also, I noticed that when I scroll this FlatList, and if the list elements aren't taking the 100% of the vertical space, it looks like if it had an overflow: hidden with the max height of the parent container, how can I make this FlatList to be also 100% height no matter what?</p>
  
  <p>This is what it's happening, not the desired outcome.
  <a href="https://i.stack.imgur.com/h8zE6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h8zE6.png" alt="enter image description here"></a></p>
  
  <p>Thanks in advance.</p>