Clamp minimum value not bumping content to next row when used inside flex item

Question

Context

• Was interested in using clamp() to regulate the width of textual
  content between certain values.
• When inside of flex item it doesn't bump the neighboring
  content down to next row when the minimum width is reached. The
  content overlaps.
• See demo in codepen below.

---

Demo: https://codepen.io/gabrimo/pen/LYxeMvR

---

Container and Flex Items

.container {
    display: flex;
    flex-wrap: row;
}
.flex-items {
    flex: 0 1 50%;
}

Three Tests - paragraphs in flex items

Only p3 below bumps the neighboring flex item to next row when container width is narrowed.

.p1 {
    width: clamp( 20em, 100% , 40em );
}
.p1 {
    width: max( 20em, min( 100%, 40em ));
}
.p1 {
    min-width: 20em; / or width: 20em;
}

---

The spec doesn't give much detail on how clamp works. Why does clamp behave this way in the flex scheme?