Note: If the flex-shrink value is 0, and the container’s wrap setting is nowrap, then the flex-items in a row will extend outside the container. You probably want to avoid this predicament.

Note: The flex-shrink value determines how much narrower an item can become in relation to other items in the same row. This means the larger the flex-shrink value, the narrower an item is allowed to be.

.container1: 1000px
flex: 1 1 400px
flex: 1 1 400px
flex: 1 1 400px
.container2: 1000px
flex: 1 1 400px
flex: 1 4 400px
flex: 1 4 400px
.container3: 1000px
flex: 1 0 400px
flex: 1 0 400px
flex: 1 0 400px