React Native: minHeight in percent is not working correctly like in Web

Question

Below are my experimental result. Does those seems right?

minHeight in percent is not working correctly like in Web, is there any workaround about it?

#--- flexDirection = column; React Native Version = 0.68.4 ;

minHeight always cross height and maxHeight.

minWidth always cross width and maxWidth.

flex will not cross maxHeight.

alignSelf=stretch will not cross width.

flex/%height/%maxHeight only be used if height keyword present in container.

alignSelf=stretch/%minWidth/%width/%maxWidth only be used if width keyword present in container.

for primary axis(here column) %minHeight is not working correctly. need to use number value only.

for secondary axis (here row) all /%minWidth/%width/%maxWidth works.

---#

Thanks in advance.

N.B: Sample code

// I applied on every elements below styles
// margin: 0,
// padding: 0,
// borderWidth: 0,
// borderRadius: 0,
// left: 0,
// top: 0,
// backgroundColor: 'transparent',
// overflow: 'hidden',

<>
  <View
    style={{
      width: 200,
      height: 300,
      backgroundColor: 'red',
    }}
    onLayout={(e) => {
      console.log('Main: ', e.nativeEvent.layout);
    }}
  >
    <View
      style={{
        //see image 1
        
        flex: 1,
        minWidth: 150,
        width: '50%',
        maxWidth: 120,
        minHeight: 120,
        height: '50%',
        maxHeight: 192,
        backgroundColor: 'green',

        //removed previous code and changed to below. see image 2

        // flex: 1,
        minWidth: 150,
        width: '50%',
        maxWidth: 120,
        // minHeight: 120,
        minHeight: '40%',
        height: '50%',
        // maxHeight: 192,
        backgroundColor: 'green',

      }}
      onLayout={(e) => {
        console.log('AfterMain: ', e.nativeEvent.layout);
      }}
    >
    </View>
  </View>
</>

image 1

image 2