title: React native, children of ScrollView wont fill full height
body: <p>So I have a horizontal scrollview at the top of the view. The ScrollView contains nodes that have a specified width. I then have a border on the bottom of the ScrollView, like you can see in this screen cap: <a href="https://i.imgur.com/pOV1JFP.png" rel="noreferrer">http://i.imgur.com/pOV1JFP.png</a></p>
  
  <p>As you can see the child nodes of the ScrollView at the top don't reach the border. However, if I change the ScrollView to a View with <code>flexDirection: 'row'</code>, then the child nodes fill the height fine. I've tried changing a few properties on the scrollview, such as:</p>
  
  <ul>
  <li>Setting <code>padding:0</code> on <code>contentContainerStyle</code></li>
  <li><code>automaticallyAdjustContentInsets={false}</code></li>
  <li>Changing the values of <code>contentInsets</code> directly</li>
  </ul>
  
  <p>None of those seem to fix the issue.</p>
  
  <p>The scrollview code &amp; style:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>var styles = StyleSheet.create({
    nav: {
      padding: 0,
      marginTop: 30,
      flex: 1,
      borderBottomWidth: 1,
      borderColor: '#000000'
    }
  });
  
  &lt;ScrollView
    style={[{width: screen.width}, styles.nav]}
    horizontal={true}
    showsHorizontalScrollIndicator={true}
    automaticallyAdjustContentInsets={false}&gt;
    {dayNavItems}
  &lt;/ScrollView&gt;
  </code></pre>
  
  <p>The child components (makes up dayNavItems)</p>
  
  <pre class="lang-js prettyprint-override"><code>const styles = StyleSheet.create({
    container: {
      paddingLeft: 15,
      paddingRight: 15,
      width: 50,
      justifyContent: 'center'
    },
    odd: {
      backgroundColor: '#ccc'
    },
    selected: {
      backgroundColor: '#39b54a'
    },
    text: {
      fontFamily: 'Optima'
    }
  });
  
  class DayNavItem extends React.Component {
    static propTypes = {
      day: React.PropTypes.object.isRequired,
      odd: React.PropTypes.bool,
      selectDay: React.PropTypes.func.isRequired,
      selected: React.PropTypes.bool
    };
  
    render() {
      const d = new Date(this.props.day.created_at);
      const viewStyles = [styles.container];
      if (this.props.selected) {
        viewStyles.push(styles.selected);
      } else if (this.props.odd) {
        viewStyles.push(styles.odd);
      }
      return (
        &lt;TouchableOpacity style={viewStyles} onPress={() =&gt; this.props.selectDay(this.props.day.uuid)}&gt;
          &lt;View&gt;
            &lt;Text style={styles.text}&gt;{getMonth(d)}&lt;/Text&gt;
            &lt;Text style={styles.text}&gt;{d.getDate()}&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/TouchableOpacity&gt;
      );
    }
  }
  </code></pre>