为何在flex项中使用clamp()设置宽度时到最小宽不换行反而重叠

背景 #

• 希望使用clamp()将文本内容的宽度限定在指定区间范围内
• 当元素处于flex项内部时，达到设置的最小宽度后，无法将相邻内容挤压到下一行，反而会出现内容重叠的问题
• 可参考对应CodePen中的演示案例

演示地址：https://codepen.io/gabrimo/pen/LYxeMvR

容器与flex项基础样式 #

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

三组flex项内段落宽度测试 #

当收窄容器宽度时，仅下方测试的p3能够将相邻flex项挤压到下一行：

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

现有规范未对clamp()的工作逻辑给出足够细节，请问为何clamp()在flex布局中会出现上述异常表现？

内容的提问来源于stack exchange，提问作者gabrimo