Flex items shrink but won't grow when flex: initial is set

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: initial;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: initial;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: initial; width: 50px;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: initial; width: 50px;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: auto;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: auto;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: auto; width: 50px;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: auto; width: 50px;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: none;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: none;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: none; width: 50px;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: none; width: 50px;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: 3;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: 3;

flex: 0

flex: 1

flex: 2

flex: 3

flex: 4

flex: 5

flex values 0 - 5

flex values 0 - 5

flex: 0

flex: 1

flex: 2

flex: 3

flex: 4

flex: 5

flex values 0 - 5

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: 3; width: 50px;

A

B B

C C C

D D D D

E E E E E

F F F F

G G G

H H

I

flex: 3; width: 50px;⤴

flex: 0

flex: 1

flex: 2

flex: 3

flex: 4

flex: 5

flex: 0 - 5; width: 50px;

flex: 0 - 5; width: 50px;

flex: 0

flex: 1

flex: 2

flex: 3

flex: 4

flex: 5

flex: 0 - 5; width: 50px;