在 flex 项目中使用时，钳制最小值不会将内容碰撞到下一行 上下文容器和弹性项目三个测试 - 弹性项目中的段落

编程问答 2022-05-14

问题描述

上下文

  • 对使用clamp()来调节文本宽度很感兴趣
    某些值之间的内容。
  • 当在 flex item 内部时，它不会碰撞相邻的
    当达到最小宽度时，内容向下到下一行。
    内容重叠。
  • 在下面的 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 会有这种行为？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

clampflexbox