如何用inline-flex布局两个文本元素仅换行溢出部分而非整个元素

该需求可以实现，首先需要明确你当前效果不符合预期的核心原因：Flex 容器的子元素（Flex 项）会被当作独立的整体排版单元处理，flex-wrap: wrap 仅会在单个 Flex 项总宽度超过剩余空间时，将整个 Flex 项换到下一行，自然无法实现两个不同元素的文本混排断行的效果。

方案1：适配需求的最优方案（无需Flex） #

如果你只是需要两个文本内容连续排布、各自保留样式，溢出时和普通文本一样在任意位置断行，直接将两个块级的<p>元素改为行内元素即可，无需使用Flex布局：

.wrapper{
  background: grey;
  padding:1rem;
  width:75%;
}

.parent{
  background:white;
  /* 移除原有的inline-flex、flex-wrap属性 */
}

.first{
  font-weight:bolder;
  display: inline;
}

.second{
  display: inline;
}

修改后两个文本会完全按照普通连续文本的规则排版，宽度不足时自动在文本间隙断行，不会出现整个元素换行的问题，同时保留第一个文本的粗体样式。

方案2：必须使用inline-flex的场景 #

如果你的业务场景必须保留inline-flex布局（比如需要搭配其他Flex特性），只能实现「第一个元素内部先断行排满、剩余空间放第二个元素、第二个元素内部再断行」的效果，无法实现两个元素文本交叉混排的断行，修改代码如下：

.wrapper{
  background: grey;
  padding:1rem;
  width:75%;
}

.parent{
  background:white;
  display:inline-flex;
  flex-wrap: wrap;
}

.first{
  font-weight:bolder;
  min-width: 0;
  flex-shrink: 1;
}

.second{
  min-width: 0;
  flex-shrink: 1;
}

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