flex嵌套布局下如何实现标签初始flex-basis:10em可收缩且新增按钮始终可见

问题根因 #

• 你编写的#slot的flex简写属性顺序错误，CSS中flex的语法为flex: <flex-grow> <flex-shrink> <flex-basis>，原有flex: auto 1 auto属于无效写法，浏览器无法按预期解析生效
• flex布局中子项默认min-width: auto，会优先保证内容展示不收缩，导致标签过多时会挤压#new按钮的位置

修正方案 #

修改对应CSS样式即可：

#tab-wrapper, #slot {
    display: flex;
    flex-wrap: nowrap;
}

#slot {
    /* 按正确顺序写flex属性，占满除#new外的剩余宽度，支持收缩 */
    flex: 1 1 auto;
    /* 取消默认最小宽度限制，允许容器收缩 */
    min-width: 0;
}

.tab {
    flex: 1 1 10em;
    border: 1px solid gray;
    /* 允许标签收缩，避免内容撑开无法压缩 */
    min-width: 0;
    /* 可选：如果需要标签内容溢出显示省略号可以加下面的属性
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    */
}

#new {
    flex: 0 0 auto;
    /* 可选：给按钮加个边距更美观
    margin-left: 8px;
    */
}

另外你原有HTML结构中#tab-wrapper的结束标签写为<div>，建议修正为</div>避免布局异常。

修改后即可满足需求：标签数量少时每个标签默认占10em宽度，#new按钮跟随在标签后；标签数量超出容器宽度时，标签会自动等比例收缩，#new按钮始终固定在所有标签右侧不会被挤出可视区域。

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