Flex box dynamic width and height

Question

I am trying to create a messages view using react-native e.g.:

As you can see:

1. The bubbles have a dynamic width and height based on the content
2. There is a maximum width for the bubbles and they grow downwards

I am trying to recreate this using react native, however I am only able to acheive (2) and not sure how to go about acheiving both.. this is what i have thus far:

  <View style={{flex:1,backgroundColor:'blue',flexDirection:'row'}}>
     <View style={{backgroundColor:'orange'}}>
            <View style={{width:90,flex:1}}>
              <Text>123</Text>
              </View>
     </View>
     <View style={{flex:0.25,backgroundColor:'red'}}>
              <Text>123</Text>
     </View>
  </View>

If I increase the orange view to represent a big bubble then it just goes off the screen... e.g.:

Answer 1

I was having same issue. I tried many things including putting wrappers here-and-there (like mentioned in previous answers). None of them worked.

@André Junges's answer is not correct because @kingkong and I have different requirements.

Then, I saw that flex can also take value -1. And setting it solved the problem.

Here is the code:

const messages = [
              'hello',
              'this is supposed to be a bit of a long line.',
              'bye'
              ];
return (
  <View style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: 150,
            alignItems: 'flex-end',
            justifyContent: 'flex-start',
            backgroundColor: '#fff',
            }}>

{messages.map( (message, index) => (
  <View key={index} style={{
                  flexDirection: 'row',
                  marginTop: 10
                }}>
    <View style={{
                  flex: -1,
                  marginLeft: 5,
                  marginRight: 5,
                  backgroundColor: '#CCC',
                  borderRadius: 10,
                  padding: 5,
                }}>
      <Text style={{
                    fontSize: 12,
                    }}>
        {message}
      </Text>
    </View>
    <Image source={require('some_path')} style={{width:30,height:30}} />
   </View> 
  ))} 
 </View>
)

And here is the result: