flex-grow | flex-shrink

flex-grow | flex-shrink | flex-basis

flex: initial; ( flex: 0 1 aut; )
flex: auto;( flex: 1 1 aut; )
flex: non; ( flex: 0 1 aut; )
flex; <positive-number>; ( flex: <positive-number> 1 0; )

  
/* 基本の値 */
  flex: auto;
  flex: initial;
  flex: none;
  flex: 2;

/* 単位がない数値を1つ指定: flex-grow */
flex: 2;

/* 幅または高さを1つ指定: flex-basis */
  flex: 10em;
  flex: 30px;

/* 値を2つ指定: flex-grow | flex-basis */
  flex: 1 30px;

/* 値を2つ指定: flex-grow | flex-shrink */
  flex: 2 2;

/* 値を3つ指定: flex-grow | flex-shrink | flex-basis */
  flex: 2 2 10%;

/* グローバル値 */
  flex: inherit;
  flex: initial;
  flex: unset;

Ex-1　code

.flex-cotainer { display : flex; }
.flexitem-1 { flex: 1 ; } 　/* flex: 1 1 0 ; */
　.flexitem-1 p { width: 100px; }
.flexitem-2 { flex: 2 ; } 　/* flex: 2 1 0 ; */
　.flexitem-2 p { width: 400px; }

Flex item 1
100px

Flex item 2
400px

900px

299px

padding 10px, border 1px

padding 10px

298.7px
(900px-4px)/(1+2)x1

597.3px
(900px-4px)/(1+2)x2

Ex-2　code

.flex-cotainer { display : flex; }
.flexitem-1 { flex: 1 100px ; } 　/* flex: 1 1 100px ; */
　.flexitem-1 p { width: 100px; }
.flexitem-2 { flex: 2 400px ; } 　/* flex: 2 1 400px ; */
　.flexitem-1 p { width: 300px; }

Flex item 1
150px;

Flex item 2
200px;

900px

padding 10px, border 1px

padding 10px

232px
100px+(900px-4px-(100px+400px))/(1+2)x1

664px
400px+(900px-4px-(100px+400px))/(1+2)x2

100px

300px

132px

Ex-3　code

.flex-cotainer { display : flex; }
.flexitem-1 { flex: 1 1 100px; }
　.flexitem-1 p { width: 500px; } 　/* width: 500px ; */
.flexitem-2 { flex: 2 3 400px; }
　.flexitem-1 p { width: 500px; } 　/* width: 500px ; */

Flex item 1
500px

Flex item 2
500px

900px

padding 10px, border 1px

padding 10px

500px

102px

.flex-cotainer { display : flex; }
.flexitem-1 { flex: 1 1 500px ; } 　/* flex-shrink: 1 ; */
　.flexitem-1 p { width: 100px; }
.flexitem-2 { flex: 2 3 500px ; } 　/* flex-shrink: 3 ; */
　.flexitem-1 p { width: 400px; }

Flex item 1
100px;

Flex item 2
400px;

900px

padding 10px, border 1px

padding 10px

474px
500px+(900px-4px-(500px+500px))/(1+3)x1

422px
500px+(900px-4px-(500px+500px))/(1+3)x3