css - 在 flex 项目中使用时，钳制最小值不会将内容撞到下一行

Question

语境

• 对使用clamp() 来调节
  特定值之间的文本内容的宽度很感兴趣。
• 
  在 flex 项目内部时，当达到最小宽度时，它不会将相邻内容向下碰撞到下一行。内容
  重叠。
• 请参阅下面的 codepen 中的演示。

---

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

---

容器和弹性项目

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

三个测试 - 弹性项目中的段落

当容器宽度变窄时，只有下面的 p3 会将相邻的 flex 项碰撞到下一行。

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

---

该规范没有详细说明夹具的工作原理。为什么在 flex 方案中，clamp 会有这种行为？

标签： cssflexboxclamp