width and flex-grow are two completely different CSS properties.
The width property is used to determine the width of the elements.
The flex-grow property is used to allocate free space in the floppy disk container. This property does not apply a specific length to the element, like the width property. It simply allows the flexible element to consume any space that may be available.
Sometimes, if I want one element to increase the rest of the space, I can either do width: 100% or flex-grow: 1 . How to choose?
Yes, if there is one element in the line, width: 100% and flex-grow: 1 can have the same effect (depending on the settings for padding , border and box-sizing ).
But what if there are two elements and you want the second to take the remaining space? With a brother in a container width: 100% causes an overflow. I think you can do something like this:
width: calc(100% - width of sibling);
But what if the brother's width is dynamic or unknown? calc no longer an option.
A quick and easy flex-grow: 1 solution flex-grow: 1 .
While width and flex-grow are oranges, width and flex-basis are apples.
The flex-basis property sets the initial basic size of the flex element and is similar to width .
For differences between flex-basis and flex-grow see: