如何实现Flex布局中叠加div的滚动（CSS）

我来帮你搞定这个进度条不跟着面板滚动的问题！核心原因是进度条的绝对定位没有绑定到左面板容器，而是相对于整个页面，所以当面板滚动时它会停在原地。下面是具体的修复方案：

问题分析 #

• 当前.workflow-bar使用position: absolute，但它的父元素.workflow-side-panel没有设置position: relative，导致进度条的定位基准是页面窗口，而非左面板。
• 进度条的高度计算calc(100% - 126px)是基于窗口高度，不是左面板的实际内容高度，这也会导致滚动时进度条和内容脱节。
• 原CSS里.workflow-bar-progress的width属性写错成了颜色值，会导致进度条无法正常显示。

修复步骤 #

1. 给左面板添加相对定位：让进度条的绝对定位以左面板为基准
2. 调整进度条的定位和高度：使其完全贴合左面板的滚动区域
3. 修正CSS中的错误属性：修复进度条宽度的错误值
4. 优化工作流项的布局：用flex gap替代<br>，让布局更可控

修改后的完整代码 #

HTML（优化工作流项间距，移除<br>） #

<div class='ngcds-container'>
  <div class='ngcds-navbar'>Primary navigation bar</div>
  <div class='ngcds-secondary-navbar'>Secondary navigation bar</div>
  <div class='ngcds-body ngcds-body-top'>
    <div class='ngcds-content'>
      <div class='ngcds-left-panel workflow-side-panel'>
        <div id='divWorkflowBar' class='workflow-bar'>
          <div id='divWorkflowBarProgress' class='workflow-bar-progress' style='height: 50%'>
          </div>
        </div>
        <div id='workflow-items' class='workflow-items'>
          <div class='workflow-item'>
            <div id='divWorkflowCircle' class='workflow-circle done'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle done'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text done'>Step 1</div>
          </div>
          <div class='workflow-item'>
            <div id='divWorkflowCircle' class='workflow-circle done'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle done'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text done'>Step 2</div>
          </div>
          <div class='workflow-item'>
            <div id='divWorkflowCircle' class='workflow-circle done'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle done'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text done'>Step 3</div>
          </div>
          <div class='workflow-item selected'>
            <div id='divWorkflowCircle' class='workflow-circle selected'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle selected'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text selected'>Step 4</div>
          </div>
          <div class='workflow-item'>
            <div id='divWorkflowCircle' class='workflow-circle'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text'>Step 5</div>
          </div>
          <div class='workflow-item'>
            <div id='divWorkflowCircle' class='workflow-circle'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text'>Step 6</div>
          </div>
          <div class='workflow-item'>
            <div id='divWorkflowCircle' class='workflow-circle'>
              <div id='divWorkflowInnerCircle' class='workflow-inner-circle'></div>
            </div>
            <div id='divWorkflowText' class='workflow-text'>Step 7</div>
          </div>
        </div>
      </div>
      <div class='ngcds-main-panel'> main panel </div>
      <div class='ngcds-right-panel'> right side panel </div>
    </div>
  </div>
</div>

CSS（核心修改已标注） #

html, body { min-height: 100%; min-width: 600px; }
.ngcds-container { height: 100%; width: 100%; }
.ngcds-body { margin: 0; padding: 0; display: flex; flex-direction: column; position: absolute; right: 0; left: 0; bottom: 0; }
.ngcds-body-top { top: 110px; }
.ngcds-navbar { background-color: #276193; color: white; height: 40px; position: fixed; top: 0; left: 0; right: 0; padding: 5px; box-sizing: border-box; z-index: 2; }
.ngcds-secondary-navbar { background-color: #068CC1; color: white; height: 70px; position: fixed; top: 40px; left: 0; right: 0; padding: 5px; box-sizing: border-box; z-index: 1; }
.ngcds-content { display: flex; flex: auto; }
.ngcds-left-panel { order: 1; background: #3E4B52; color: white; flex: 0 0 auto; }
.ngcds-main-panel { padding: 10px; flex: 1; order: 2; font-size: 24px; overflow: auto; }
.ngcds-right-panel { padding: 5px; background: #3E4B52; color: white; order: 3; flex: 0 0 auto; }

/* 核心修改1：给左面板添加相对定位，预留进度条空间 */
.workflow-side-panel { 
  overflow-y: auto; 
  box-sizing: border-box; 
  position: relative; 
  padding-left: 60px; 
  min-width: 200px; 
}

/* 核心修改2：调整进度条定位，绑定到左面板 */
.workflow-bar { 
  position: absolute; 
  top: 0; 
  left: 31px; 
  background: #4D595F; 
  height: 100%; 
  width: 20px; 
  margin: 0; 
  z-index: 0; 
}

/* 核心修改3：修复进度条宽度的错误属性 */
.workflow-bar-progress { 
  position: relative; 
  background: #068CC1; 
  width: 100%; 
}

/* 核心修改4：用flex gap替代<br>，优化项间距 */
.workflow-items { 
  padding: 10px 0; 
  list-style: none; 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
}

.workflow-item { 
  width: 100%; 
  height: 66px; 
  cursor: pointer; 
  border-right: 10px solid #3E4B52; 
  box-sizing: border-box; 
  z-index: 2; 
}
.workflow-item.selected { }

/* 补充圆圈样式，保证视觉正常显示 */
.workflow-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  position: relative;
  top: 18px;
}
.workflow-inner-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.workflow-circle.done, .workflow-inner-circle.done {
  background-color: #068CC1;
}
.workflow-circle.selected {
  border-color: #068CC1;
}
.workflow-inner-circle.selected {
  background-color: #068CC1;
}
.workflow-text {
  display: inline-block;
  position: relative;
  top: -8px;
}

现在缩小浏览器窗口时，左面板滚动时进度条会和工作流步骤同步滚动，完美贴合！

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