Note: The actual width of a flex-item is reliant upon the width of the flex container, the flex-grow value, and the item’s flex-basis width value.

Note: flex: flex-grow flex-shrink flex-basis

Note: flex-grow equals a numerical value indicating a relative percentage. flex-shrink is a relative shrinking property i.e. how it will shrink comparing to its siblings. Whereas flex-basis sets a minimum width for a given element.