width and flex-grow are two entirely different CSS properties.
The width property is used for defining the width of elements.
The flex-grow property is used for distributing free space in a flex container. This property doesn’t apply a specific length to an element, like the width property. It simply allows a flex item to consume whatever space may be available.
Sometimes if I want one element to grow the rest of the space, I can either do
width: 100%orflex-grow: 1. How do I choose?
Yes, if there is one element in the row, width: 100% and flex-grow: 1 may have the same effect (depending on padding, border and box-sizing settings).
But what if there are two elements, and you want the second one to take the remaining space? With a sibling in the container, width: 100% causes an overflow. I guess you can do something like this:
width: calc(100% - width of sibling);
But what if the sibling’s width is dynamic or unknown? calc is no longer an option.
The quick and easy solution is flex-grow: 1.
While width and flex-grow are apples-to-oranges, width and flex-basis are apples-to-apples.
The flex-basis property sets the initial main size of a flex item and is similar to width.
- What are the differences between flex-basis and width?
For the differences between flex-basis and flex-grow see:
- flex-grow not sizing flex items as expected