Unable to scroll even after using Scrollview - react-native

Question

This is my code and below you can find the image where I am not able to scroll.
I have tried using scrollview and also tried dimensions and also tried adding view tag in the top but still not working. What should I do to overcome this behavior? I am not able to fix it and tried many hours fixing it but still not able to achieve the scroll.
const data = useContext(BlogContext);
const singleBlog = data.filter((blog) => blog.title === route.params.title);
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.outer}>
{singleBlog.length > 0 &&
singleBlog.map((blog) => (
<View key={Math.random()}>
<Image source={{ uri: blog.image }} style={styles.blogImage} />
<Text style={styles.title}>{blog.title}</Text>
<View style={styles.authorAndDate}>
<Text style={styles.author}>
<Text style={{ fontWeight: "500" }}>Wriiten by: </Text>
{blog.author === null ? "unknown" : blog.author}
</Text>
<Text style={styles.date}>
{new Date(blog.published_at).toDateString()}
</Text>
</View>
<Text style={styles.description}>{blog.description}</Text>
</View>
))}
{/* <StatusBar style="light" /> */}
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
blogImage: {
width: "100%",
height: "40%",
marginBottom: 5,
},
title: {
fontFamily: "Poppins_600SemiBold",
textTransform: "capitalize",
fontSize: 40,
fontWeight: "600",
paddingHorizontal: 10,
},
authorAndDate: {
flexDirection: "row",
justifyContent: "space-between",
marginHorizontal: 10,
borderBottomColor: "#BDBDBD",
borderBottomWidth: 1,
paddingBottom: 10,
marginBottom: 10,
},
author: {
fontFamily: "Poppins_500Medium",
textTransform: "capitalize",
fontSize: 18,
fontWeight: "700",
color: "#434343",
},
date: {
color: "#878787",
fontFamily: "Poppins_500Medium",
textTransform: "capitalize",
fontWeight: "500",
fontSize: 14,
},
description: {
color: "#555555",
fontFamily: "Poppins_400Regular",
fontWeight: "400",
paddingHorizontal: 10,
fontSize: 20,
lineHeight: 31,
},
container: {
flexGrow: 1,
borderColor: "red",
borderWidth: 4,
},
outer: {
flex: 1,
// borderColor: "red",
borderWidth: 4,
},
inner: {
flexGrow: 1,
},
});
export default SingleBlogScreen;
enter image description here
In this Image, I am not able to scroll.

Answer 1

I have found the solution for the above issue
changing the blogImage height from 60% -> 600
fixed the issue and now scroll is working
thanks to #wojtek2939 for helping....