FAQ: Flexbox - flex-grow

From the documentation for flex-grow:

The flex-grow CSS property sets the flex grow factor of a flex item’s main size.

The main size is either width or height of the item which is dependent on the flex-direction value.

For this exercise, the main axis is horizontal (row is the default for flex-direction), so flex-grow only affects how the items behave in the horizontal direction.

For this particular exercise, if you wanted to remove the space on the top and bottom of the items, then you can comment out the min-height property from the #top, #middle, #bottom { } selector which sets the minimum height of the container. Now the container will only be as tall as the item with the largest height.

If you don’t want to change the minimum height of the container, then you can comment out the height: 100px property from the .top, .middle, .bottom { } selector (thereby removing the fixed height of the items) AND change the align-items property’s value to stretch in the #top, #middle, #bottom { } selector. Now, the items will stretch till they fill all the height of the container.