html - Missing values in shorthand property -

quoting css 2.2 spec:

when values omitted shorthand form, each "missing" property assigned initial value (see section on the cascade).

but how browsers know value matches property? example, following code taken a complete guide flexbox:

.header, .main, .nav, .aside, .footer {   flex: 1 100%; } 

what mean? equivalent

.header, .main, .nav, .aside, .footer {   flex-grow: 1;   flex-shrink: initial;   flex-basis: 100%; } 

or

.header, .main, .nav, .aside, .footer {   flex-grow: 1;   flex-shrink: 100%;   flex-basis: initial; } 

or else?

the flexible box layout module specification defines how shorthand property should handled in the 'flex' shorthand section:

 value: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] 

using css values , units specificaiton (which defines |, ? , || symbols in above statement mean, can see value should either:

1. be none
2. be <flex grow> (and optionally <flex-shrink>) and/or <flex-basis> in order.

this means example of:

flex: 1 100%; 

translates to:

flex-grow: 1; flex-shrink: initial; flex-basis: 100%; 

because 100% not valid value <flex-shrink>

if, however, example instead:

flex: 1 0; 

where 0 valid value both <flex-shrink> , <flex-basis>, translate to:

flex-grow: 1; flex-shrink: 0; flex-basis: initial;