Flex布局下如何让指定列自动占满容器剩余可用宽度

之前的写法不生效主要有3个核心原因：

• 未给#progress-container设置禁止伸缩的flex规则，flex子项默认允许收缩，宽度计算不符合预期
• #titles作为flex子项默认min-width: auto，当内部标题内容过长时会撑开自身宽度，挤压进度容器空间
• 进度容器内部使用float布局，在flex上下文中float会失效，干扰宽度计算；另外原代码存在CSS语法笔误、HTML属性笔误，会导致部分样式不生效

修正后完整CSS代码 #

#inner-container {
    display: flex;
    align-items: center; /* 可选：让标题和进度条垂直居中，可按需调整 */
    gap: 1rem; /* 可选：标题和进度条之间的间距，可按需调整 */
}
#titles {
    flex: 1;
    min-width: 0; /* 关键：允许flex子项收缩，避免被内部内容撑开 */
}
#titles > div {
    width: 100%;
}
#progress-container {
    flex: 0 0 auto; /* 关键：不放大、不收缩，宽度完全由内容决定，适配动态页数 */
    display: flex; /* 内部改用flex布局，替代失效的float */
    align-items: center;
    gap: 4px; /* 可选：页码、分页链接之间的间距，可按需调整 */
}
#progress-container #page-counter {
    /* 移除原float: left规则，flex布局下float无效 */
}
#progress-container a {
    display: inline-block;
    width: 30px;
    height: 12px; /* 补全原代码缺失的分号，否则后续border样式会失效 */
    border: 3px solid #ffffff;
}
@media (max-width: 900px) {
    #progress-container #page-counter {
        display: none;
    }
}

规则说明 #

• #progress-container设置flex: 0 0 auto后，宽度完全由内部的页码、分页链接数量决定，不需要写死固定宽度，完全适配动态变化的页数
• #titles设置flex:1加min-width:0后，会自动占满父容器扣除进度容器宽度后的所有剩余空间，不会被内部长标题撑破布局
• 进度容器内部改用flex布局后，原float规则带来的布局干扰完全消失，元素对齐、间距控制更稳定
• 小屏下#page-counter设置display:none后，元素不占文档流空间，flex会自动重新计算宽度分配，不需要额外写适配规则
• 记得同步修正HTML笔误：原代码中nav标签的id属性缺少闭合引号，<nav id="progress-container>应改为<nav id="progress-container">，否则浏览器无法正确识别元素id，导致样式失效

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