title: Flexbox variable height children in React Native
body: <p>I'm new to Flexbox, Exponent, and React Native, so I'm not certain if I'm doing this correctly. Any help you can provide would be appreciated and I've provided a snack below that could be used as a starting point.</p>
  
  <p>My screen has a header that's 40px tall at the top and a tab bar that's 40px tall on the bottom.</p>
  
  <p>Between them, I'd like to have a full-width, full-height column that has rows of content with charts on the left, and a header (Billing, Budget, Labor) to the right of the chart with variable number of rows of data beneath the header. These rows have a key that's left-aligned (Invoiced, Not Invoiced, Total, etc.) and a value that's right-aligned (500.00, 250.00, 750.00, etc.). </p>
  
  <p>Because the number of rows of data vary (3, 4, 3, etc.), I don't want to hard-code the heights of each chart row. I also don't want these rows to stretch/grow to the height of the center column, but allow for whitespace beneath them). </p>
  
  <p>How can I build this so that:
  1. Rows don't fill the height of the center column, but align on the top and leave whitespace below.
  2. Charts are left-aligned next to their data.
  3. Data figures/values (e.g., 500.00) are right aligned next to their keys (e.g., Invoiced). </p>
  
  <p><a href="https://i.stack.imgur.com/9VLbg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9VLbg.png" alt="Designed example of the above"></a>
  <a href="https://i.stack.imgur.com/BGQ0u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BGQ0u.png" alt="Rough concept of the example above"></a></p>
  
  <p>Any help would be amazing. If you could provide a snack.expo.io, that'd be even better! Here's a rough example of what I mean, but you can see that the rows are stretching to the height (so there's a lot of wasted space and no empty space at the bottom) and the key/values in the data aren't justified so the key is on the left and the value is right-aligned. 
  <a href="https://snack.expo.io/HknEsZ5uz" rel="nofollow noreferrer">https://snack.expo.io/HknEsZ5uz</a></p>