I am new to CSS skills. I didn't learn much about it.

I have a question about how to make an element have full width. I added my code down below, but the simplest way I tried didn't work which is width: '100%'.

I have a code in react native, so components are nested in order I put. The higher code is a parent of code right down to it. I would like elements in RideCard.js, each ride card, to have expand fully next to DateDay.js. I could have seen that once I removed flexDirection: row in oneDayContainer in MonthBody.js, the elements expanded fully. But I would like to keep the design.

Thanks in advance.

MonthBody > DateDay RideList >

MonthBody.js

import { StyleSheet } from "react-native";
import { View } from "react-native";
import { useFirestoreContext } from "../../contexts/FirestoreContext";
import { DateDay } from "./DateDay";
import { RideList } from "./RideList";


export const MonthBody = ({ monthYear }) => {

  const { rides } =
      useFirestoreContext();

  return (
    <View style={styles.monthBodyContainer}>
      {Object.keys(rides[monthYear]).map((dateDay, j) => {
        return (
          <View style={styles.oneDayContainer}>
            <DateDay dateDay={dateDay} />
            <RideList monthYear={monthYear} dateDay={dateDay}  />
          </View>
        );d
      })}
    </View>
  );
}



const styles = StyleSheet.create({
  monthBodyContainer: {
    display: "flex",
    flexDirection: "column",
  },
  oneDayContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "flex-start",
  },
});

DateDay.js

import { StyleSheet, Text, View } from "react-native";

export const DateDay = ({dateDay}) => {
  return (
    <View style={styles.dateDayContainer}>
      <Text style={styles.dayText}>{dateDay.split("-")[1]}</Text>
      <Text style={styles.dateText}>{dateDay.split("-")[0]}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  dateDayContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    width: 50,
    marginRight: 20,
    marginTop: 10,
  },
  dateText: {
    fontSize: 16,
    textAlign: "center",
  },
  dayText: {
    fontSize: 12,
    textAlign: "center",
  },
});

RideList.js

import { StyleSheet, Text, View } from "react-native";
import { COLOR } from "../../assets/variables";
import { useFirestoreContext } from "../../contexts/FirestoreContext";
import { RideCard } from "./RideCard";
export const RideList = ({ monthYear, dateDay }) => {
  const { rides } = useFirestoreContext();

  return (
    <View style={styles.rideList}>
      {rides[monthYear][dateDay].map((ride, k) => {
        // return <RideCard key={k} ride={ride} />;
        return <RideCard key={k} ride={ride} />;
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  rideList: {
    marginBottom: 5,
  },
});

RideCard.js

import { StyleSheet, Text, View } from "react-native";
import { COLOR } from "../../assets/variables";

export const RideCard = ({ ride }) => {
  console.log("RideCard", ride);
  return (
    <View
      style={[
        styles.container,
        ride.boardType === "NEED"
          ? { backgroundColor: COLOR.lightGreen, borderWidth: .3, borderColor: COLOR.green }
          : { backgroundColor: COLOR.lightBlue, borderWidth: .3, borderColor: COLOR.blue },
      ]}
    >
      <View style={styles.places}>
        <Text style={styles.placeText}>{ride.cityFrom}</Text>
        <Text> - </Text>
        <Text style={styles.placeText}>{ride.cityTo}</Text>
      </View>
      <View>
        <Text style={styles.dateText}>
          {ride.leavingHour}:{ride.leavingMinutes}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
    marginBottom: 5,
    borderRadius: 10,
  },
  places: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 5,
  },
});

CodePudding user response：

On the CardList styles you can add flex: 1 to the rideList.

const styles = StyleSheet.create({
  rideList: {
    marginBottom: 5,
    flex: 1,
  },
});