Demo of flex item growth (proportional)

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