如何让flex容器宽度自适应第一行所有flex子项的总宽度

你可以通过两处CSS修改实现需求：

1. 调整父容器对齐规则
   你当前的.all-container设置了justify-content: space-between，会自动将剩余空间分配到三个子元素的间隔中，导致中间的标签容器被强制撑宽，改成flex-start即可取消自动拉伸：

.all-container {
  width: 90%;
  background-color: rgb(231, 248, 228);
  display: flex;
  padding: 10px;
  gap: 10px;
  /* 替换原有justify-content配置 */
  justify-content: flex-start;
}

2. 给标签容器设置内容自适应宽度
   给.tag-list添加width: fit-content属性，让容器宽度自动匹配第一行所有子项的总宽度，子项删除后容器宽度会同步收缩：

.tag-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  /* 新增以下配置，带前缀兼容老版本浏览器 */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

如果需要三个区域的间隔保持均匀，也可以将.all-container的justify-content设置为space-evenly，不会影响标签容器的自适应效果。

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