title: Flex box dynamic width and height
body: <p>I am trying to create a messages view using react-native e.g.:</p>
  
  <p><img src="https://i.stack.imgur.com/dp003.jpg" alt="enter image description here"></p>
  
  <p>As you can see:</p>
  
  <ol>
  <li>The bubbles have a dynamic width and height based on the content</li>
  <li>There is a maximum width for the bubbles and they grow downwards</li>
  </ol>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/RHSw2.png" alt="enter image description here"></p>
  
  <pre><code>  &lt;View style={{flex:1,backgroundColor:'blue',flexDirection:'row'}}&gt;
       &lt;View style={{backgroundColor:'orange'}}&gt;
              &lt;View style={{width:90,flex:1}}&gt;
                &lt;Text&gt;123&lt;/Text&gt;
                &lt;/View&gt;
       &lt;/View&gt;
       &lt;View style={{flex:0.25,backgroundColor:'red'}}&gt;
                &lt;Text&gt;123&lt;/Text&gt;
       &lt;/View&gt;
    &lt;/View&gt;
  </code></pre>
  
  <p>If I increase the orange view to represent a big bubble then it just goes off the screen... e.g.: </p>
  
  <p><img src="https://i.stack.imgur.com/DFLBZ.png" alt="enter image description here"></p>