title: Flex layout with ScrollView
body: <p>I've been making Layouts for Screens in React Native with Flexbox for a while now and hadn't run into any trouble until today when I had to make this very simple layout:</p>
  
  <ul>
  <li>A <strong>header</strong> section (not a NavBar).</li>
  <li>A <strong>content</strong> section &rarr; A ScrollView with a FlatList inside of it.</li>
  <li>A <strong>footer</strong> section.</li>
  </ul>
  
  <p>I want the content section to be 3 times bigger than the Header and the Footer, so naturally I set the flex to 1 (header), 3 (content), 1 (footer).  </p>
  
  <p>No matter what, the content remains as if it has <code>flex: 1</code>.<br>
  The only way I could control the layout the way I wanted was to leave content's <code>flex: 1</code> and set both footer and header to <code>flex: 0.33</code>.</p>
  
  <p>I suspect it might have something to do with ScrollView's <strong>contentContainerStyle</strong> prop which I set to <code>flexGrow: 1, flexShrink: 1</code>.</p>
  
  <p>Here's a <strong><a href="https://snack.expo.io/SJIezEAEm" rel="nofollow noreferrer" title="Snack.io">minimal example</a></strong> which reproduces this.</p>