Create a view that grows with content and when it hits the screen height begins scrolling with react native?

Question

I want to build a box with a list of elements using react native. I want the box to grow as more elements are added and once the box is a tall as the device screen the contents of the box become scrollable. That way I can have a header and footer always on screen.

In other words, I want a container to fit it's contents and if there is more content than will fit on the screen, I want the container to be scrollable.

Is that possible?

Here is a rnplay: https://rnplay.org/apps/KrOk6w

This is what I want to happen with more items than will fit on the screen:

This is what I DO want to happen with only a few items:

This is what I DO NOT want to happen with only a few items:

Here's the code I'm using in this example, You can change rowCount to increase the rows.

var React = require('react-native');

var {
    View,
    Text,
    StyleSheet,
    ScrollView,
} = React;

var styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        flexDirection: 'column',
        backgroundColor: "blue",
    },
    contentContainer: {
    },
    headerContainer: {
        padding: 20,
        backgroundColor: "#EEE",
    },
    footerContainer: {
        padding: 20,
        backgroundColor: "#EEE",
    },
    rowContainer: {
        borderTopWidth: 1,
        borderColor: "#EEE",
        padding: 30,
        backgroundColor: "red",
    },
});

class Test extends React.Component {
    render() {
        var rowCount = 20;
        var rows = [];
        for(i = 0; i < rowCount; i++) {
            rows.push(<View style={styles.rowContainer}>
                <Text>
                    {"Some text"}
                </Text>
            </View>);
        }
        return (
            <View style={styles.container}>
                <View style={styles.headerContainer}>
                    <Text>
                        {"Header text"}
                    </Text>
                </View>
                <ScrollView
                    contentContainerStyle={styles.contentContainer}>
                    {rows}
                </ScrollView>
                <View style={styles.footerContainer}>
                    <Text>
                        {"Footer text"}
                    </Text>
                </View>
            </View>
        );
    }
};

module.exports = Test;

Answer 1

set a property to the container view of: justify-content: flex-start

Answer 2

Use flexGrow: 0, otherwise the ScrollView will take all the height available even when there is no content.