title: How to make component stick to bottom in ScrollView but still alow other content to push it down
body: <p>I have three views:  one at the top, middle and bottom. The scroll view takes the whole screen. The problem is that now scroll view is not scrollable.</p>
  
  <pre><code>&lt;ScrollView contentContainerStyle={{flex: 1, backgroundColor: '#00ff00', flexDirection: 'column', justifyContent: 'space-between'}}&gt;
    &lt;View&gt;&lt;SomeContent /&gt;&lt;/View&gt;
    &lt;View&gt;&lt;SomeContent /&gt;&lt;/View&gt;
    &lt;View&gt;&lt;SomeContent /&gt;&lt;/View&gt;
  &lt;/ScrollView&gt;
  </code></pre>
  
  <p>If I remove <code>flex: 1</code> scroll view takes about 50% of the screen. 
  How do I make a scroll view with top, middle and bottom elements like on the image bellow.</p>
  
  <p><a href="https://i.stack.imgur.com/HBPpK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HBPpK.png" alt="Screenshot of an iPhone. The background of the screen is white. It has three boxes that are different shades of blue: one at the top, one in the middle, and one at bottom. The boxes are aligned to the left and there is a lot of white space between the boxes."></a></p>
  
  <p>The bottom element should be at the bottom all the time but when the top two components' height is large they should push the bottom component down so I can use scroll view to move up/down.</p>