title: React Native ScrollView not scrolling to the bottom
body: <p>So I have a slightly unique case here and I am having a lot of trouble figuring out the flexbox layouts. I basically have one "header" that stays fixed at the top ("headerContainer") then a ScrollView below it that wraps a HTMLView container (<a href="https://github.com/jsdf/react-native-htmlview" rel="nofollow noreferrer">https://github.com/jsdf/react-native-htmlview</a>).</p>
  
  <p>The problem is that the ScrollView won't scroll to the bottom of the HTMLView content. I had tried adding a margin to the HTMLView but the amount extra that I had to scroll seems to be variable so sometimes I'll get a big gap between how much I can scroll and the content. You will also see that I have a TouchableOpacity below the HTMLView and that again is too far down for the ScrollView to reach. Any suggestions on how to change my styles to get this to work?</p>
  
  <pre><code>const visitWebsiteVersion = (url) =&gt; {
      OutOfAppLinking(url)
  }
  const PostView = (props) =&gt; {
      let postTypeName;
      let postIcon;
      switch (props.postType) {
          case 'something1':
              postTypeName = 'something1'
              postIcon = &lt;FontAwesome name={'bell'} size={20} color={gray500} style={styles.iconStyles}/&gt;
              break;
          case 'something2':
              postTypeName = 'Something2'
              postIcon = &lt;FontAwesome name={'newspaper-o'} size={15} color={gray500} style={styles.iconStyles}/&gt;
              break;
          case 'something3':
              postTypeName = 'Something3'
              postIcon = &lt;FontAwesome name={'book'} size={15} color={gray500} style={styles.iconStyles}/&gt;
              break;
          case 'something4':
              postTypeName = 'Something4'
              postIcon = &lt;FontAwesome name={'book'} size={15} color={gray500} style={styles.iconStyles}/&gt;
              break;
          default:
              postTypeName = ''
              postIcon = ''
      }
  
      return(
          &lt;View style={styles.postContainer}&gt;
              &lt;View style={styles.headerContainer}&gt;
                  &lt;View style={styles.headerTopRow}&gt;
                      &lt;View style={{flexDirection: 'row'}}&gt;
                          {postIcon}
                          &lt;Text style={styles.postType}&gt;{postTypeName}&lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;Text style={styles.postDate}&gt;{monthDayYearConversion(props.postDate)}&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;Text style={styles.postTitle}&gt;{props.title}&lt;/Text&gt;
                  &lt;View style={styles.headerBottomRow}&gt;
                      &lt;View&gt;
                          &lt;View style={{flexDirection: 'row'}}&gt;
                              &lt;Text style={styles.authorName}&gt;By {props.author.name}&lt;/Text&gt;
                          &lt;/View&gt;
                          &lt;View style={{flexDirection: 'row'}}&gt;
                              &lt;Text style={styles.subscriptionTitle}&gt;{props.subscription}&lt;/Text&gt;
                          &lt;/View&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
              &lt;ScrollView
                  style={styles.scrollContainer}
                  showsVerticalScrollIndicator={false}
              &gt;
                  &lt;HTMLView
                      value={props.content}
                      stylesheet={htmlContentStylesheet}
                      style={styles.contentContainer}
                      renderNode={htmlNodeRendering}
                  /&gt;
                  &lt;TouchableOpacity
                      onPress={() =&gt; visitWebsiteVersion(props.postLink)}
                      style={{...inContentButton}}
                  &gt;
                      &lt;Text style={{fontSize: 15, color: gray100}}&gt;Read Website Version&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/ScrollView&gt;
          &lt;/View&gt;
      )
  }
  
  PostView.propTypes = {
      postID: PropTypes.number.isRequired,
      title: PropTypes.string.isRequired,
      excerpt: PropTypes.string,
      content: PropTypes.string.isRequired,
      postDate: PropTypes.string.isRequired,
      author: PropTypes.object.isRequired,
      postType: PropTypes.string.isRequired,
      subscription: PropTypes.string,
      postLink: PropTypes.string.isRequired,
      actionsToTake: PropTypes.oneOfType([
          PropTypes.bool,
          PropTypes.array
      ]).isRequired
  }
  PostView.defaultProps = {
      actionsToTake: false
  }
  
  const styles = StyleSheet.create({
      postContainer: {
  
      },
      headerTopRow: {
          flexDirection: 'row',
          justifyContent: 'space-between'
      },
      headerBottomRow: {
          flexDirection: 'row',
          marginTop: 15,
          backgroundColor: postHeaderGray,
          marginBottom: -16,
          marginRight: -15,
          marginLeft: -15,
          padding: 15,
          borderColor: gray200,
          borderTopWidth: 2
      },
      headerContainer: {
          borderBottomWidth: 1,
          borderColor: gray100,
          shadowColor: '#000',
          backgroundColor: gray100,
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.8,
          shadowRadius: 2,
          elevation: 1,
          padding: 15
  
      },
      scrollContainer: {
          ...htmlContentScrollContainer
      },
      iconStyles: {
          alignSelf: 'flex-start'
      },
      postTitle: {
          ...PostTitle,
          fontSize: 25
      },
      postType: {
          ...MetaTitle,
          marginLeft: 5
      },
      postDate: {
          alignSelf: 'flex-end',
          ...MetaTitle
      },
      authorName: {
          ...MetaTitle,
          flex: 1,
          flexWrap: 'wrap'
      },
      authorImage: {
          width: 75,
          height: 75,
          borderRadius: 35
      },
      subscriptionTitle: {
          ...MetaTitle,
          flexWrap: 'wrap',
          fontWeight: '700'
      },
      // This isn't the best solution but I think it will work for now
      contentContainer: {
          // marginBottom: 600
      }
  })
  
  export default PostView
  </code></pre>