CSS Flexible box layout module - part 4 - Altering flex items dimensions to fill the available space

We have a flex container and inside we have not known amount of flex items, and we want them to fill available space. For this we have to use flex-grow property on flex items.

flex-grow: x;

How flex-grow property works? Browser sums values of flex-grow property in flex items and then alter flex items width to be equal x/sum of all available space. For example, if we have 3 flex items, and every has flex-grow: 1;, it means that every flex element takes 1/3 of available space.

This is an example, where first flex item has flex-grow: 1; second one has flex-grow:3 and last one has flex-grow: 2;

But there is more properties related to filling available space. We can define flex-shrink property with number as a value and flex-basis with a proper width as a value.

flex-shrink: x;
flex-basis: Xpx;

flex-basis defines the ideal width of flex item, together with flex-grow define how flex items should look like on different screens. If flex-basis is defined flex-grow define which part of available space will take flex item.

Example 1.1

We have 499px width flex container with 2 flex items (A and B). Both flex items have 200px width, but A has flex-grow: 1; and B has flex-grow: 2;. So we have 400px reserved for width of both flex items and 99px of extra available space. It means that all available space we have – 99px – we need to divide on 3 parts (because we sum flex-grow of both elements, 1 + 2 = 3) and element A gets 1/3 * 99 = 33px and B: 2/3 * 99 = 66px. So in browser we will see element A width 233px and element B width 266px;.

Example 1.2

But what happens if there is no available space? If there is no available space flex-grow is not used. Assuming, both items (A and B) have the same value of flex-basis: 200px;, and flex container has width: 300px;. There is no space for two flex items, so their widths will be recalculated based on given flex-basis. Our flex items are the same, so every will take ½ of flex container width.

Example 1.3

But what if we have flex items with different value of flex-basis property? For example A has 200px and B 150px. Flex container still has 300px of width. Both flex items need to be squeezed to fit the available spaces. Browser gets a factor dividing available space (300px) on counted from flex items flex-basis properties (350px). Then uses this factor (~0.85) to calculate new widths of flex items. Flex item A will have 171px and B will have 129px.

flex-shrink defines, how flex item shrinks, if there is no available space, in comparison to other flex items in flex container.

Example 1.4

Assuming, we have flex container 300px width and inside are 2 flex items (A and B), and every has flex-basis equal 200px. Item A has flex-shrink: 1; and B has flex-shrink: 2;. Here it is a little more complicated. First browser calculates how much more space is needed (400px-300px=100px), then divides it on sum flex-shrink values of all flex items (100/3 = 33.3). Then calculates what amount should subtract from given flex-basis value using flex-shrink. For flex item A it will be 33.3x1 (flex-shrink: 1;), so item A will have 167px of width. Flex item B will have 133px, (200px – (33.3px x2)).

Example 1.5

Let's mix examples and take hardest version. So we have flex container 300px width. Inside it contains 2 flex items (A and B). Item A has flex-basis: 200px; and flex-shrink: 1; item B has flex-basis: 150px; and flex-shrink: 2;. So what is a result? Item A is 180px width and item B 120px. Why? Because item B shrinks more than item A. In this case, item A was squeezed by 10% and item B by 20%, 2 times more, just as flex-shrink property was set.