Why do flex items wrap instead of shrink?

See Flex Layout Algorithm in the spec:

1. Initial Setup
2. Line Length Determination
3. Main Size Determination
4. Cross Size Determination
5. Main-Axis Alignment
6. Cross-Axis Alignment
7. Resolving Flexible Lengths
8. Definite and Indefinite Sizes
9. Intrinsic Sizes

First, at step 3, flex items are collected into flex lines.

Later, at step 7, they flex (grow, shrink, or remain unaltered).

So yes, flex-wrap, which determines how flex items are collected into flex lines, has more "priority" than flex-shrink.

The flex-shrink property often comes in handy in a single-line flex container (flex-wrap: nowrap).

In other words, when the flex items cannot wrap, flex-shrink will enable them to shrink when the container is too small (the spec calls this negative free space). This has the effect of preventing flex items from overflowing the container.

However, in a multi-line flex container (flex-wrap: wrap) no negative free space is created most of the time because flex items can create additional lines. An exception is when a multi-line container in, let's say, row-direction, is narrow enough to wrap all items. This leaves items stacked in a single column. Now they will shrink or hold firm, depending on flex-shrink (demo).

You have a row-direction, wrap-enabled flex container with three flex items.

• div #1 ~ flex: 1 0 200px
• div #2 ~ flex: 1 1 400px
• div #3 ~ flex: 1 0 200px

When the container is greater than 800px, all items stay on the line.

When the container breaks below 800px, div #3 will wrap (there is no need to shrink, even if it could).

At the 600px mark (the combined width of divs #1 & #2), div #2 wraps. Again, no need to shrink.

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
div:nth-child(1) {
  flex: 1 0 200px;
  height: 200px;
  background-color: lightgreen;
}
div:nth-child(2) {
  flex: 1 1 400px;
  height: 200px;
  background-color: lightyellow;
}
div:nth-child(3) {
  flex: 1 0 200px;
  height: 200px;
  background-color: lightblue;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

From the spec:

flex-shrink

[This property] specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.