flex or flex-grow

Question

i am using a flex to adjust a width for these element; main, .aside1, .aside2.
a page comes as i expected.
as i know flex is a shorthand for flex-grow, flex-shrink, and flex-basis.
because a first shorthand for a flex is a flex-grow, so i try to change a flex to flex-grow to makes width adjustment for some elements. hoping it will give a same results, but a results are not as expected.

This is my code:
https://code.sololearn.com/WR0hbwfhR2eB/?ref=app

This is how it looks when flex change to flex-grow:
https://i.ibb.co/PZsHSM7/flex-or-flex-grow.png

I change flex with flex-grow :
https://i.ibb.co/PrbZdXg/flexeded.png

Answer 1

Good question

https://developer.mozilla.org/en-US/docs/Web/CSS/flex#%3C'flex-grow'%3E

One-value syntax: the value must be one of:
a <number>: In this case it is interpreted as flex: <number> 1 0; the <flex-shrink> value is assumed to be 1 and the <flex-basis> value is assumed to be 0.

So,

Add flex-shrink: 1; and flex-basis: 0;

and you should see outcome same as flex: 1;

https://code.sololearn.com/Wko1dtuqMdbM/?ref=app

Answer 2

Gordon i think flex-grow, flex-shrink and flex-basis doesn't always works if written as single line.

It's 'safer' using a flex shorthand i think

Thanks for replying n solutions suggestions