Flex doing crazy things in React Native

Flex is making my app look like a disaster.

import {
  StyleSheet,
  Text,
  View,
  Button,
  Pressable,
  Image,
  ScrollView,
} from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.contentContainer}>
        <ScrollView
          horizontal={true}
          contentContainerStyle={styles.horizContainer}
        >
          <Image
            style={styles.bookWireframe}
            source={require("./assets/images/bookWireframe.png")}
            resizeMode="contain"
          />
          <Image
            style={styles.bookWireframe}
            source={require("./assets/images/bookWireframe2.png")}
            resizeMode="contain"
          />
          <Image
            style={styles.bookWireframe}
            source={require("./assets/images/bookWireframe2.png")}
            resizeMode="contain"
          />
        </ScrollView>
        <View style={styles.buttonContainer}>
          <Pressable style={styles.purpleButton}></Pressable>
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.text}>DUE 01/24</Text>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 700,
    width: "100%",
  },
  contentContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    color: "green",
    backgroundColor: "aquamarine",
    flexDirection: "column",
  },
  horizContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  bookWireframe: { width: "20%" },
  buttonContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    backgroundColor: "red",
  },
  purpleButton: {
    backgroundColor: "purple",
    width: "80%",
    paddingVertical: 30,
    borderWidth: 4,
    borderColor: "black",
    borderRadius: "50%",
  },
  textContainer: {
    flex: 1,
  },
  text: {
    fontSize: 40,
    fontWeight: "700",
    fontStyle: "italic",
  },
});

Here's an image of the Expo Go page.

The idea is that there are three containers, horizContainer, buttonContainer, and textContainer, and that they are nested inside contentContainer (the vertical ScrollView). If the parent ScrollView has flex of 1, and the children Views and ScrollViews all have flex of 1, shouldn't they be evenly split within the parent? There's also images inside the child horizontal ScrollView.

For some reason the padding inside the horizontal ScrollView is massive, and can't be turned off with {{padding: 0}}. And the flexbox just doesn't work for me.

ScrollView won't scroll down and stay there, either. The horizontal one was working earlier though, and scrolls and stays when the width is wider than the screen-width and the images are big enough.

I was trying to follow the answer / container advice from this StackOverflow thread, but it hasn't completely solved things. Their advice is to wrap the outermost ScrollView in a View, that gives it a more static height to scroll within.

I was expecting three stacked vertical columns, blocks that could scroll downwards. Got an extremely mangled, non-scrollable version of that.

-edit-
After looking more into the code, I think you actually need to hint the view containing image about it's height, either using flexBasis or height.

I believe you are missing flexShrink: 1 and maybe flexGrow: 1 on your 3 containers. Here is a small playground to see how the values affect the layout: https://snack.expo.dev/@viljarremato/flex-basis,-grow,-and-shrink

In React Native flexShrink is defaulting to 0 instead of 1 in CSS, it is common pitfall I occasionaly fall into myself.