如何通过纯HTML/CSS将滚动条移离组件右侧边框实现外置固定列

单容器无法实现该效果的核心原因是CSS规范的既定规则：当元素的overflow-y设置为scroll/auto时，即使显式写了overflow-x: visible，浏览器也会强制将overflow-x的计算值改为auto，超出容器宽度的内容必然会被裁剪或出现横向滚动条，没有办法绕过这个规则。

采用双层容器拆分能力的思路实现：把纵向滚动能力收归内层主内容容器，外层容器不做溢出裁剪，用来放置右侧的固定汇总列。

完整代码示例 #

/* 最外层容器：不做溢出裁剪，宽度为主区域+汇总列宽度 */
.container-outer {
  width: 620px; /* 500px主区域宽度 + 100px汇总列宽度 + 20px间距，可按需调整 */
  height: 400px;
  position: relative;
}
/* 内层主内容滚动区：带红色边框，仅做纵向滚动，横向溢出裁剪 */
.main-scroll {
  border: 2px solid red;
  width: 500px;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
/* 原有列表行样式 */
.child {
  background: green;
  height: 50px;
  margin-bottom: 2px;
  width: 600px;
}
/* 右侧汇总列：绝对定位到主区域右侧，不受滚动容器裁剪 */
.summary-col {
  position: absolute;
  top: 0;
  left: 520px; /* 主区域宽度500px + 20px间距 */
  width: 100px;
}
/* 汇总列行项，高度和左侧列表行匹配，保证对齐 */
.summary-item {
  height: 52px; /* 左侧行高50px + 下边距2px */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  margin-bottom: 2px;
}

<div class="container-outer">
  <div class="main-scroll">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="summary-col">
    <div class="summary-item">汇总1</div>
    <div class="summary-item">汇总2</div>
    <div class="summary-item">汇总3</div>
    <div class="summary-item">汇总4</div>
    <div class="summary-item">汇总5</div>
    <div class="summary-item">汇总6</div>
    <div class="summary-item">汇总7</div>
    <div class="summary-item">汇总8</div>
    <div class="summary-item">汇总9</div>
    <div class="summary-item">汇总10</div>
    <div class="summary-item">汇总11</div>
    <div class="summary-item">汇总12</div>
    <div class="summary-item">汇总13</div>
    <div class="summary-item">汇总14</div>
    <div class="summary-item">汇总15</div>
    <div class="summary-item">汇总16</div>
    <div class="summary-item">汇总17</div>
    <div class="summary-item">汇总18</div>
    <div class="summary-item">汇总19</div>
    <div class="summary-item">汇总20</div>
    <div class="summary-item">汇总21</div>
    <div class="summary-item">汇总22</div>
    <div class="summary-item">汇总23</div>
    <div class="summary-item">汇总24</div>
  </div>
</div>

方案说明 #

• 主内容的红色边框、纵向滚动逻辑完全和原有效果一致，主区域内超出宽度的内容会被正常裁剪
• 汇总列放在滚动容器外，通过绝对定位固定在主区域右侧，不会被滚动容器的溢出规则裁剪，完全处于可滚动区域外侧
• 只需要保证汇总列的行高和左侧列表行高一致，就能实现逐行对齐的效果
• 如果需要汇总列跟随主内容纵向滚动，只需要把汇总列移入.main-scroll容器内，将定位方式改为position: sticky; left: 500px;即可，不需要额外JS同步滚动位置。

效果示意图

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