title: React Native: Setting flex:1 on a ScrollView contentContainerStyle causes overlapping of components
body: <h2>Problem:</h2>
  
  <p>I have a ScrollView with 2 subviews and I want the first of them (lets call it ViewA) to have {flex: 1} so the other one (ViewB) will stick to the bottom of the screen - but only if their total height is smaller that the screen. Of course that if they are higher than the screen I want it to scroll as usual.</p>
  
  <p>Case 1 (GOOD): ViewA with long text, ViewB scrolls with it. <a href="https://rnplay.org/apps/slCivA" rel="noreferrer">https://rnplay.org/apps/slCivA</a></p>
  
  <p>Case 2 (BAD): ViewA with short text, ViewB doesn't stick to the bottom. <a href="https://rnplay.org/apps/OmQakQ" rel="noreferrer">https://rnplay.org/apps/OmQakQ</a> </p>
  
  <h2>Tried Solution:</h2>
  
  <p>So I set the ScrollView's style AND contentContainerStyle to be flex: 1. I 
  Also set ViewA's style to flex:1. But when I do it, the ScrollView's contentContainer view is fixed to the screen height, thus not able to scroll if needed and even worse - ViewB overlaps ViewA.</p>
  
  <p>Case 3 (BAD): ViewB sticks to the bottom, but the whole thing doesn't scroll. <a href="https://rnplay.org/apps/wZgtWA" rel="noreferrer">https://rnplay.org/apps/wZgtWA</a></p>
  
  <p>If it's a bug - how to fix/workaround it?
  If it's the expected behaviour - how can I achieve what I've described?</p>
  
  <p>Thanks.</p>