title: React Native Flex Height
body: <p>So I am learning React Native Flex, and came across this problem:</p>
  
  <ul>
  <li>Header: RED</li>
  <li>Body: GREEN</li>
  <li>Footer: BLUE</li>
  </ul>
  
  <p>Let's focus only on Body and it's content.</p>
  
  <pre><code>&lt;View style={styles.body}&gt;
    &lt;View style={styles.container}&gt;
      &lt;View style={styles.yellow}&gt;&lt;/View&gt;
      &lt;View style={styles.orange}&gt;&lt;/View&gt;
    &lt;/View&gt;
  &lt;/View&gt;
  
  body: {
    flex: 15,
    justifyContent: 'center',
    alignContent: 'center',
  }
  </code></pre>
  
  <p>Inside Body, I want to have this kinda-like container which will hold elements inside it.</p>
  
  <p>1) If I give flex &lt; 1, I get it shrinked only by height.</p>
  
  <pre><code>container: {
     flex: 0.9,
     flexDirection: 'row',
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/GkUxd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GkUxd.png" alt="enter image description here"></a></p>
  
  <p>2) If I give width and height, only width works.</p>
  
  <pre><code>container: {
     flex: 1,
     flexDirection: 'row',
     width: '90%',
     height: '90%', // doesn't work?
     alignSelf: 'center' // had to add this, without it, container would stick to left side
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/JDVHc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JDVHc.png" alt="enter image description here"></a></p>
  
  <p>3) Adding margin as percent, sticks the whole container to bottom, and alignSelf doesn't work.</p>
  
  <p>4) Adding margin as number, works, but I want to avoid pure numbers since they look different on other devices. (Also, this is desired)</p>
  
  <p><a href="https://i.stack.imgur.com/E0Qq6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E0Qq6.png" alt="enter image description here"></a></p>
  
  <p>How do I achieve effect from last picture, but only with flex and width,height in %? Is it even possible?</p>
  
  <p>Also, what is good practice for cases like this?</p>