如何实现粘性头中面包屑扩容时，导航占用可用空间右移？

问题现象 #

我有一个sticky-header粘性头部容器，内部包含面包屑容器和导航菜单容器。当前问题是：当左侧面包屑元素长度增加时，面包屑会向左移出屏幕，而不是将右侧的导航菜单推到头部右侧的可用空间中。

• 正常状态：面包屑长度适中，导航菜单位置正常
• 面包屑扩容后：面包屑左移超出屏幕，导航菜单未向右移动
• 期望效果：面包屑扩容时，导航菜单自动向右移动，利用头部右侧的可用空间

页面结构 #

<div class="sticky-header">
    <div class="col-lg-6 d-none d-xl-block">
        <nav class="desktop-nav">
            <div class="container-lg">
                <div class="breadcrumb-section" padding-bottom="50px">
                    <ul class="breadcrumbs">
                        <!-- breadcrumb items -->
                    </ul>
                </div>
            </div>
            <!-- nav items -->
        </nav>
    </div>
</div>

相关CSS代码 #

.sticky-header 样式 #

/* HEADER SECTION | NAVIGATION */
.sticky-header {
    /* To make the header sticky */
    position: sticky;
    top: 0px;
    background-color: #F0F0F0;
    padding: 0px 0px;
    height: 60px;
    z-index: 1000;
    white-space: nowrap;
    border: none;

    .content {
        height: 200vh;
    }

    /* To center the navigation container */
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.col-lg-6 样式 #

.col-lg-5,
.col-lg-6 {
    flex: 0 0 auto;
    width: 41.66666667%
}

.col-lg-6 {
    width: 50%
}

.d-none & .d-xl-block 样式 #

.d-none {
    display: none !important
}

.d-xl-block {
    display: block !important
}

.desktop-nav 样式 #

.desktop-nav {
    display: flex;
    align-items: top;
    justify-content: center
}

.container-lg 样式 #

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)*.5);
    padding-left: calc(var(--bs-gutter-x)*.5);
    margin-right: auto;
    margin-left: auto
}

.breadcrumb-section 样式 #

.breadcrumb-section {
    padding: 5px 0px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

解决方案 #

问题根源在于布局约束设置冲突，调整步骤如下：

1. 修改.sticky-header的布局规则
   移除强制不换行和居中设置，避免内容溢出后直接超出屏幕：

   .sticky-header {
       position: sticky;
       top: 0px;
       background-color: #F0F0F0;
       padding: 0 1rem; /* 增加左右内边距，避免内容贴边 */
       height: 60px;
       z-index: 1000;
       border: none;
       display: flex;
       align-items: center;
       /* 移除white-space: nowrap和justify-content: center */
   }
   

2. 解除.col-lg-6的固定宽度限制
   当前固定宽度+不可伸缩的设置导致容器无法利用头部剩余空间，改为可伸缩：

   .col-lg-6 {
       flex: 1 1 auto; /* 允许容器随内容伸缩 */
       width: auto; /* 去掉固定宽度 */
   }
   

3. 调整.desktop-nav的布局方向
   让面包屑居左、导航居右，充分利用容器宽度：

   .desktop-nav {
       display: flex;
       align-items: center; /* 替换align-items: top，保证垂直居中 */
       justify-content: space-between; /* 面包屑左对齐，导航右对齐 */
       width: 100%; /* 占满父容器宽度 */
   }
   

4. 修改.breadcrumb-section的对齐方式
   移除居中设置，让面包屑自然居左：

   .breadcrumb-section {
       padding: 5px 0px 12px;
       display: flex;
       align-items: center;
       /* 移除justify-content: center */
   }
   

5. 优化面包屑的溢出处理
   避免面包屑过长时完全溢出，添加截断效果：

   .breadcrumbs {
       display: flex;
       gap: 0.5rem;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   

调整后，面包屑长度增加时会自然占据左侧空间，导航菜单会被推到右侧可用区域，符合期望效果。

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