Demo of flex item growth

A flexbox can allocate its unused space to its children, growing them to fill all available space. Final size of each child depends on its flexbox-related properties like flex-growth and flex-basis.

In this example child2 and child3 start with flex-basis:auto. This means child height is counted when flexbox calculates parent unused space, and any allocated space is "tacked on" to the child. But use that checkbox to set flex-basis:0px and you'll see sizing change as the child's height is treated as 0.

Child1 has flex:none so it doesn't grow or shrink, it just sizes to its height:40px (and this height is counted in the unused space calculation).

Parent height: 250

Parent unused space = parentHeight - child1height xxx

Child 1.  flex:none (0 0 auto), height:40px

Child 2.  flex:1 0 auto, height:60px, flex'd ht: ??px

Child 3.  flex:3 0 auto , height:50px, flex'd ht: ??px

Note: px values may be rounded