How do properties flex-grow and flex-shrink work…

flex-grow determines how much an element can grow when there is free space in the container. A value of 0 (default) means the element will not grow. Positive values indicate the growth factor relative to other flex items in the same row.

flex-shrink determines how much an element can shrink when there is insufficient free space in the container. A value of 1 (default) means the element can shrink. A value of 0 prohibits shrinking. Positive values indicate the shrink factor relative to other flex items.

Let's consider an example:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

.container {
  display: flex;
  width: 400px; /* Container width */
}

.item {
  flex-basis: 100px; /* Base size of each item */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Will occupy 1 share of free space */
  flex-shrink: 0; /* Will not shrink */
}

.item-2 {
  flex-grow: 2; /* Will occupy 2 shares of free space */
  flex-shrink: 1; /* Can shrink */
}

.item-3 {
  flex-grow: 1; /* Will occupy 1 share of free space */
  flex-shrink: 1; /* Can shrink */
}

In this case, the total base size of the elements is 300px (3 * 100px). The free space is 100px (400px - 300px). This free space will be distributed among the items 1, 2, and 3 in proportion to their flex-grow: 1 + 2 + 1 = 4. Item 1 will get 1/4 * 100px = 25px of additional space. Item 2 will get 2/4 * 100px = 50px of additional space. Item 3 will get 1/4 * 100px = 25px of additional space.

Their final sizes will be: Item 1: 100px + 25px = 125px Item 2: 100px + 50px = 150px Item 3: 100px + 25px = 125px

If the container width is insufficient (e.g., 200px), compression would be necessary. When space is insufficient for compression, flex-shrink and the size of the elements are considered. The missing space is distributed for shrinking among elements whose flex-shrink is greater than 0, proportionally to their flex-shrink multiplied by their current size (after considering flex-basis). The compression algorithm is a bit more complex, but the main idea is that elements with larger flex-shrink or larger current size will shrink more.

It is important to remember that flex-basis, flex-grow, and flex-shrink are often used together as the shorthand property flex. For example, flex: 1 1 auto; is equivalent to flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Priority in space distribution:

flex-basis: Sets the initial size of the element.
flex-grow: Distributes positive free space.
flex-shrink: Distributes negative free space (shrinking necessity).

How do properties flex-grow and flex-shrink work?