This shows one way a flex item can grow to fill its parent as defined in the 2012 Flexbox specification. Caution: Flexbox 2009 spec does NOT support the proportional sizing shown here.
This shows a special case where parent free space is allocated to its children based solely on their flex property values. This proportional layout is used when all flex items have a positive integer for their flex property value (e.g., flex:1).
Here total flex values is 5 (1+1+3) so flex:1 items each are sized to 1/5 of available space, flex:3 gets 3/5..
Use the checkbox to set flexbox height:50% and you'll see the proportional allocation still applies as you change the flexbox container height.
Parent height: 250
Child 1. flex:1, ht:40px, flex'd ht: ??px
Child 2. flex:1, ht:60px, flex'd ht: ??px
Child 3. flex:3, ht:50px, flex'd ht: ??px
Note: px values may be rounded