* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

flex의 요소 중 flexDirection을 이리저리 만져보던 중, 아래 코드를 작성했더니 컨텐츠 view가 아래로 내려가더랍니다.

컨텐츠의 상위뷰인 이너투의 flexDirection은 row고, alignitems는 flex-end인데, 자식요소인 컨텐츠가 어떻게 아래로 내려간건지 이해가 되질 않습니다.

작성한 코드 및 에러 메세지

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


export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.containerOne}>


      </View>
      <View style={styles.containerTwo}>
        <View style={styles.innerOne}>
         
        </View>
        <View style={styles.innerTwo}>
          <View style={styles.content}></View>
        </View>


      </View>
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    flexDirection:"row",
    backgroundColor:"yellow"
  },
  innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    backgroundColor:"orange",
// 바로 여기요!! 밑줄!!
    alignItems:"flex-end",
    flexDirection:"row"
  },
  content: {
    width:50,
    height:50,
    backgroundColor:"#000"
  }
});