flex-grow

flex-grow

The flex-grow property specifies how much the object will grow relative to the rest of the flexible items inside the same flex container. If all objects have flex-grow set to 1 then the remaining space in the container will be distributed equally to all objects. If one of the objects has a value of 2 then the remaining space will take up twice as much space as the other objects (if possible)

I mentioned in the beginning that Flexbox is great for responsive design. This is where it shines. The flex-grow property allows our flex item to grow if necessary. So if there is extra free space in the container, I can tell a particular item to fill it up based on some proportion.

In CSS everything is pretty static. With this property, it's like it has its own brain and it will adjust its size depending on the container. You don't have to monitor the size. It will adjust accordingly.

.child {
  flex-grow: 0 /* default */
          or <number>
}