flex-grow

This property indicates whether a flex item can grow when there is free space and by how much.

In this example, the element with the class .item will grow in width, ignoring the width value and content size. But only with free space available.

        
          
          .container {  display: flex;}.item {  flex-grow: 1;}
          .container {
  display: flex;
}

.item {
  flex-grow: 1;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

If all flex items have flex-grow: 1 specified, the free space in the container will be evenly distributed among all of them.

If we assign one of the items flex-grow: 2, it will try to occupy twice as much free space as its neighbors.

By default, the value is 0. The value can be any positive integer (including 0).

💡 It's very convenient to set all flex items to flex-grow: 1, and then they will be of equal size and occupy all the inner space of the parent.
💡 The property works with proportional space distribution, not with specific sizes. Understanding it all will be helped by the article "How flex-grow really works".