Set Stack height based on currently rendered component

Question

I need to set the <Stack> height based on the rendered component height. If a component is not has big as the available space, its container shouldn't be bigger.

I've already tried setting the screenOptions.contentStyle.flex to 1 or 0 but the component keeps using the wrong height.

_layout.tsx:

export default function SignIn() {
    return (
        <View style={styles.container}>
            <View style={styles.header}>
                {/* Some footer text */}
            </View>
            <Stack screenOptions={{ headerShown: false, freezeOnBlur: true }} >
                <Stack.Screen name="signin_credentials" options={{ animation: "slide_from_left" }} />
                <Stack.Screen name="signin_password" options={{ animation: "slide_from_right" }} />
            </Stack>
            <Button 
                title={"Continua"} 
                onPress={handlePress} 
                style={{ width: '100%', marginTop: 15 }} 
            />
            <View style={styles.signup}>
                {/* Some footer text */}
            </View>
        </View>
    );
}

These are the results with flex: 1

and flex: 0