Flex-Grow and Flex-Shrink

When the Layout property of a group is set to Horizontal or Vertical, the Flex-Grow and Flex-Shrink properties of the group's children become active.

Flex-Grow and Flex-Shrink work horizontally when Layout is set to Horizontal and Width is Auto.

Flex-Grow and Flex-Shrink work vertically when Layout is set to Vertical and Height is Auto.

Think of Flex-Grow and Flex-Shrink values as ratios. An object will get larger (Flex-Grow) or smaller (Flex-Shrink) than its default size in proportion to other objects that are sharing space within the container. The amount that each object grows or shrinks is dependent on the Flex-Grow and Flex-Shrink values of other objects in the container. This video illustrates the concept.