让Flex父容器适配内容宽度并消除多余空白

问题本质 #

你用display: flex定义的菜单容器是块级元素，默认会占满父容器的可用宽度。当菜单项换行后，容器宽度不会自动收缩到内容实际宽度，导致左侧出现多余空白。

两种可行方案 #

方案1：切换为inline-flex布局 #

把菜单容器的display属性改为inline-flex，让容器宽度完全贴合内容，同时保留flex的布局特性：

#menu-top-menu {
    display: inline-flex; /* 替换原display: flex */
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.5em;
    column-gap: 1.5em;
}

由于菜单嵌套在包含搜索框的flex容器中，inline-flex会让菜单仅占据自身内容所需空间，不会影响搜索框min-width: 30%的规则生效。

方案2：设置width: fit-content #

如果不想改变display类型，可给容器添加width: fit-content强制宽度适配内容，同时用外边距维持靠右对齐：

#menu-top-menu {
    display: flex;
    width: fit-content; /* 新增：让容器宽度贴合内容 */
    margin-left: auto; /* 替代justify-content，保持菜单靠右 */
    flex-wrap: wrap;
    row-gap: 0.5em;
    column-gap: 1.5em;
}

设置width: fit-content后，justify-content无法再控制容器本身的位置，用margin-left: auto可以自动填充左侧空间，确保菜单依然靠右，同时容器宽度随内容变化。

父容器配合建议 #

确保包含搜索框和菜单的父容器设置display: flex，并给搜索框添加flex: 1; min-width: 30%;，这样搜索框会自动填充剩余空间，和调整后的菜单容器形成合理的布局关系。

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