列表无法自动换行需横向滚动，已尝试flex-wrap:wrap等属性无效

你的问题出在li元素没有设置合适的flex缩放规则，虽然ul已经加了flex-wrap: wrap，但li默认没有宽度限制，会尽可能占据空间，无法触发容器的换行逻辑。

修复方案： #

• 给li添加flex: 1 1 <基础宽度>属性，让它能根据容器宽度自动缩放并换行
• 可选：处理li内部的长文本，避免内容撑大li导致无法换行

修改后的完整CSS代码： #

ul {
    list-style-type: none;
    padding: 0;
    display: flex;  
    flex-wrap: wrap;
    gap: 10px; /* 用gap替代margin-bottom，flex布局下间距更可控 */
}

li {
    background-color: #ffe8f9;
    color: #000000;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    flex-wrap: wrap;
    flex: 1 1 200px; /* 核心：允许缩放，基础宽度200px，空间不足时换行 */
    gap: 8px; /* 内部元素间距，避免挤在一起 */
}

/* 针对li内部长文本的换行处理 */
li * {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

关键说明： #

• flex: 1 1 200px 拆解：
  • flex-grow: 1：容器有多余空间时，li会自动放大占满
  • flex-shrink: 1：容器空间不足时，li会自动缩小
  • flex-basis: 200px：li的基础宽度为200px，当容器宽度不足以容纳所有li的基础宽度时，就会触发换行
• 如果希望li的最小宽度更灵活，可以把200px换成fit-content，让li根据自身内容调整最小宽度后再换行
• 用gap替代margin-bottom可以避免最后一行li出现多余的底部间距，更符合flex布局的间距逻辑

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