title: React Native ScrollView doesnt scroll
body: <p>I can't seem to figure out why a screen in my Android app doesn't scroll at all. I've tried many different solutions but it just wont work... 
  I suppose there is some kind of problem with flexbox in my component structure but cant figure it out. Maybe Im missing something else..
  Please help</p>
  
  <p>Here's my code:</p>
  
  <pre><code>import React, { Component } from "react";
  import styled from "styled-components";
  import {ScrollView,StyleSheet,SafeAreaView,View,StatusBar} from "react-native";
  
  import MenuContentItem from "../components/MenuContentItem";
  
  export default class MenuScreen extends Component {
      static navigationOptions = {
          header: null
  };
  
  render() {
      return (
          &lt;SafeAreaView style={styles.container}&gt;
              &lt;StatusBar barStyle="light-content" 
               backgroundColor="#dedede" /&gt;
              &lt;ScrollView
                  contentContainerStyle={{
                      flex: 1,
                      justifyContent: "space-between"
                  }}
              &gt;
              &lt;View style={{flex:1}}&gt;
  
              &lt;Container&gt;
                      &lt;Header&gt;
                          &lt;Title&gt;Menu&lt;/Title&gt;
                      &lt;/Header&gt;
                      &lt;Content&gt;
                          &lt;ContentTitle&gt;Recommended&lt;/ContentTitle&gt;
                          &lt;ContentWrapper&gt;
                              {MenuItems.map((menuItem, index) =&gt; (
                                  &lt;MenuContentItem
                                      key={index}
                                      image={menuItem.image}
                                      title={menuItem.title}
                                      subtitle={menuItem.subtitle}
                                  /&gt;
                              ))}
                          &lt;/ContentWrapper&gt;
                      &lt;/Content&gt;
                  &lt;/Container&gt;
              &lt;/View&gt;
              &lt;/ScrollView&gt;
          &lt;/SafeAreaView&gt;
         );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1
      }
  });
  
  const Header = styled.View`
      width: 100%;
      height: 55px;
      display: flex;
      flex-direction: row;
      align-items: center;
      background: #fff;
      border-bottom-color: #dedede;
      border-bottom-width: 1px;
  `;
  
  const Title = styled.Text`
      color: #5600ff;
      margin: 0 auto;
      font-family: "Roboto";
      font-size: 18px;
      font-weight: 400;
  `;
  
  const Container = styled.View`
      width: 100%;
      height: 100%;
      flex: 1;
  `;
  
  const Content = styled.View`
      width: 100%;
      height: 100%;
      padding: 40px 20px;
      background: #e9edff;
      flex: 1;
  `;
  
  const ContentTitle = styled.Text`
      color: #5600ff;
      font-family: "Roboto";
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 15px;
      margin-left: 7px;
  `;
  
  const ContentWrapper = styled.View`
     width: 100%;
     height: 100%;
     display: flex;
     flex: 1;
     flex-direction: row;
     flex-wrap: wrap;
  `;
  </code></pre>