自定义flex容器word-wrap不生效 文本溢出问题如何解决？

• Flex布局的子元素默认min-width属性值为auto，会优先按照内容原始宽度撑开容器，即便父级设置了最大宽度也不会主动收缩，这是之前添加word-wrap: break-word不生效的核心原因。
• 换行规则没有直接作用到文本所在的<h2>标签，仅在外层容器添加属性无法影响内部文本节点的换行逻辑。

步骤1：调整flex容器规则，允许宽度收缩 #

修改.operation_mode类的CSS，添加min-width: 0属性，解除flex子项的默认宽度限制：

.operation_mode {
    display: flex;
    flex: auto;
    flex-direction: row;
    justify-content: center;
    min-width: 0; /* 新增行 */
}

如果外层仍有溢出，可同步给.item类也添加min-width: 0：

@media only screen and (min-width: 650px) {
    .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex: auto;
    }

    .item {
        flex-basis: 100%;
        max-width: 306px;
        padding: 5px;
        min-width: 0; /* 新增行 */
    }
}

步骤2：给文本标签添加完整换行规则 #

给<h2>标签配置换行属性，确保长文本、连续字符都能正常换行：

.operation_mode h2 {
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: center; /* 配合原有居中逻辑，保持文本居中展示 */
    margin: 0; /* 可选，清除h2默认边距避免排版错位 */
}

内容的提问来源于stack exchange，提问作者Sini.py