flex-wrap整段换行问题：如何实现长标签适配首行剩余空间换行

要实现你需要的效果——让第二个长标签填充首行剩余空间、多余内容自动换行，只需要给第二个.content元素添加两个关键样式即可，父容器的flex设置保留不变：

修改后的完整代码 #

CSS #

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 针对第二个内容元素设置 */
.content:nth-child(2) {
  flex: 1; /* 让元素抢占容器首行的剩余空间 */
  min-width: 0; /* 打破flex项默认的最小宽度限制，允许元素宽度收缩到能让内容换行的尺寸 */
}

HTML（无需改动） #

<div class='container'>
  <div class='content'>Label1 |</div>
  <div class='content'>Loooooooong long label</div>
</div>

原理说明 #

• flex: 1：等价于flex-grow:1; flex-shrink:1; flex-basis:0%，让第二个元素自动填充首行剩余的所有可用空间。
• min-width:0：默认情况下，flex元素的最小宽度是自身内容的宽度，这会导致它无法收缩到让内容换行的程度，添加这个属性可以解除这个限制，让元素宽度随容器剩余空间调整，从而触发内容自动换行。

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