title: React Native <Text> overflows <View> when in a flex
body: <p><a href="https://i.stack.imgur.com/sdlKa.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sdlKa.png" alt="enter image description here"></a></p>
  
  <p>So for the above image, I am attempting to get the "green" box to wrap around the dynamic text.  Notice how the blue and yellow text boxes are in a <code>flex: 'row'</code> configuration, and the blue box of text is at a <code>flex: 2</code> and the yellow is <code>flex: 1</code>.</p>
  
  <p>Things work fine until the text is too big for the parent container.</p>
  
  <p>I'd like for the green container to grow as needed to fit the flexed inner children.  Is this possible with react native?</p>
  
  <p>Here's an image of what it looks like in a web sense:</p>
  
  <p><a href="https://i.stack.imgur.com/Q1oTe.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Q1oTe.png" alt="enter image description here"></a></p>
  
  <p>I've tried setting the green box to have a <code>flex: 1</code> but then it's way too big as it fills the entire screen.  Setting <code>height</code> is possible, but I don't know the size of the biggest inner component (at least without some hackery).  I've even tried <code>minHeight</code>.</p>
  
  <p>Has anyone attempted something like this?  Do I need to get the height of the inner elements dynamically myself?</p>
  
  <p>UPDATE - Here's the bit of code:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>  &lt;View style={{ flex: 1, flexDirection: 'column', marginTop: 70, backgroundColor: '#f9e2ff' }}&gt;
      &lt;View
        style={{
          minHeight: 40,
          borderWidth: 1,
          borderStyle: 'solid',
          padding: 5,
          margin: 5,
          backgroundColor: '#58c09e'
        }}
      &gt;
        &lt;View style={{ flex: 1, flexDirection: 'row' }}&gt;
          &lt;View style={{ flex: 2, backgroundColor: '#eeff96' }}&gt;
            &lt;Text&gt;
              Hello this is a long bit of text that will fill up the entire column to see how the text will wrap
            &lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={{ flex: 1, backgroundColor: '#eeffff' }}&gt;
            &lt;Text&gt;Hello again?&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  </code></pre>
  
  <p>Thanks for looking.</p>