Flexbox如何实现仅当另一个flex项宽度为0时才触发flex项换行

你可以通过调整flex项的收缩规则和换行规则实现需求，核心逻辑是让按钮容器不参与收缩，优先压缩头部文本容器的宽度，直到头部完全消失后再触发按钮容器换行，修改后的CSS如下：

.wrapper {
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  max-width: 600px;
  /* 新增：允许flex项换行 */
  flex-wrap: wrap;
}

.flex-wrapper {
  display: flex;
  min-width: 0;
  /* 新增：占满剩余空间，允许收缩 */
  flex: 1;
}

.header {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}

.actions {
  display: flex;
  /* 新增：禁止按钮容器收缩，保持所有按钮的原有宽度 */
  flex-shrink: 0;
}

.actions button:not(:last-child) {
  margin-right: 10px;
}

• 给外层容器.wrapper加flex-wrap: wrap，允许空间不足时子项换行
• 给头部容器.flex-wrapper加flex: 1，让它优先占满除按钮外的所有剩余空间，同时允许收缩
• 给按钮容器.actions加flex-shrink: 0，禁止容器被压缩，保证所有按钮始终在同一行显示，直到容器宽度连按钮的总宽度都装不下时，才会整体换行到下一行
• 头部文本的text-overflow: ellipsis会在头部容器宽度不足时自动显示省略号，直到容器宽度缩为0时文本完全消失，之后再缩小容器宽度就会触发按钮换行，完全符合需求。

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