Flexbox: set child width to 80% while flex-direction is set to column on the parent

Question

I am working on a React Native project. The container's flexDirection is set to column and I want the child's width to span 80% of the parent. If the parent's flexDirection was set to row I would have set the flex value to 0.8 and be done with it. The restrictions are

1. I can't have an additional container around the child.
2. I can't give the child a fixed width in pixels.

Here is a playground to fiddle with the problem.

Answer 1

I recently learned that after ReactNative version 0.42 there is support for percentage units not just only for width but also the following properties:

• padding
• margin
• width
• height
• minWidth
• minHeight
• maxWidth
• maxHeight
• flexBasis

If you want to learn more here is a link to the actual commit that added this awesome functionality.

The answer to my question would be to just add a percentage width of 80% Here it is my original fiddle with the fix added.