如何避免flexbox容器内列表溢出，实现元素自动换行且宽度适配内容

• 核心改动：给flex容器.list新增flex-wrap: wrap属性，flex布局默认是不换行的，这是溢出的核心原因，开启后子项超过容器宽度时就会自动换行。
• 原有.item类没有设置固定宽度，仅设置了最小宽度60px，本身就支持宽度自适应内容，不需要额外调整，开启换行后就可以实现需求。

可选优化项 #

• 可以给.list添加row-gap: 6px属性，设置换行后行与行之间的垂直间距，避免上下行贴在一起。
• 可以用column-gap: 6px替换原来的.item中使用:not(:last-child)设置的右外边距，写法更简洁，也不会出现行尾多余外边距导致的提前换行问题。

修复后完整CSS代码 #

.container {
   width: 400px;
   border: 1px solid red;
   padding: 20px;
}

.list {
   display: flex;
   flex-wrap: wrap;
   /* 可选：设置行列间距 */
   column-gap: 6px;
   row-gap: 6px;
}

.item {
   display: flex;
   justify-content: center;
   align-items: center;
   min-width: 60px;
   padding: 0 6px;
   border: 1px solid #c5c5c5;
   /* 用column-gap替代后可删除这段外边距代码
   &:not(:last-child) {
      margin-right: 6px;
   }
   */
}

修改后列表项总长度超过400px容器宽度时会自动换行，每个列表项宽度会根据自身内容自适应，最小宽度保持60px，长内容也会正常撑开不会被压缩。

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