Column Element Flex Grow and Flex Shrink Options

Flex-grow tells your column whether or not it can take up additional space within its wrapping container. Initially, the option will be empty, which means a default value of 0, and thus the column will not grow to take up any available space. With a value of 1 or higher, we are telling the column to grow and to take up the available space.

It’s easiest to explain this with an example. Let’s say you have three columns of 1/4 width. This means they take up seventy-five percent of the container. If nothing is set, then the columns will not grow and remain at 1/4 each, but if they all get a flex-grow value of 1, the remaining twenty-five percent is distributed equally among all three columns (an extra 8.333% for each one). But if you set a value of one on the first and third column, but a value of two in the middle column, then the browser would divide the remaining space by four (25% / 4 = 6.5%) and apply two units to the second column (13%) while the first and third column would only grow by one unit (6.5%).

To give another example, if you have a pixel width column, which size do you set to the neighboring sibling? To make it fill up the space it would have to be calc(100% – 200px) e.g., if the px width column had a size of 200px. This can easily be rectified by setting flex grow to the column instead.

The same applies if one of the columns changes its percentage width value from desktop to mobile. Then, flex grow on the other one would make that one adjust accordingly.

This option only works if the parent container’s Content Wrap value is set to No Wrap. By default, the containers are set to wrap, so if the columns take up too much space, the last one will simply be pushed to a new row. But, when Content Wrap is turned off, all columns are forced to stay on the same row. That could lead to overflow when there are some elements in the columns that can’t be reduced in width.

So, the Flex Shrink factor, similar to Flex Grow, lets the browser decide which columns can shrink more than others. Initially, all columns have a factor of 1, so if you set one of them to e.g. 2, it can shrink twice as much as the others.

Another important value is a Flex Shrink value of 0, which means the column must not shrink at all. For example, if you use a px width column, that will make sure, that regardless of available space, that column will always remain at its set px width. If Flex Grow is set on the same column, then it won’t shrink more than the overall width of its content.