本文详解如何让 `position: absolute` 的图表参考线（如水平标线）正确撑满整个滚动容器内所有子元素的总宽度，核心在于解决 `.chart` 容器默认 `width: auto` 导致的宽度截断问题。
在构建响应式柱状图（尤其是支持横向滚动的长图表）时，常需添加一条贯穿全图的水平参考线（如 .chart-line），用于标识阈值、均值或目标值。但开发者常遇到一个典型问题：尽管为参考线设置了 left: 0; right: 0; 和 position: absolute，它却仅覆盖父容器 .chart-container 的可视宽度，而非其内部所有柱子（.bar）拼接后的实际内容总宽度。
根本原因在于：.chart 默认采用 width: auto（即收缩包裹行为），而其子元素（.bar）以 grid 布局横向排列且存在 grid-column-gap，导致整体内容宽度远超 .chart-container 的视口宽度。此时，position: absolute 的 .chart-line 的 left/right 计算基准是 .chart 的自身边界——而该边界并未随子内容自动扩展，因此参考线被“锁死”在初始可视区域，无法延伸至滚动区域的右侧。
✅ 正确解法是显式赋予 .chart 足够的内在宽度，使其能自然容纳全部网格列：
.chart {
height: 200px;
width: max-content; /* 关键：使容器宽度由子内容决定 */
display: grid;
grid-column-gap: 5px;
grid-template-rows: repeat(100, 1fr);
position: relative;
}同时修正 .chart-line 的定位逻辑（移除错误的 right: -100%）：
立即学习“前端免费学习笔记（深入）”；
.chart-line {
min-width: 100%; /* 保持最小宽度兜底 */
border-bottom: 2px solid red;
position: absolute;
top: auto; /* 避免与 bottom 冲突 */
bottom: 50%; /* 支持动态百分比定位（如 50% = 中线） */
left: 0;
right: 0; /* 真正撑满当前 .chart 的完整内容宽度 */
}⚠️ 注意事项：width: max-content 是现代浏览器广泛支持的属性（Chrome 65+、Firefox 61+、Safari 14.1+），若需兼容旧版 Safari，可改用 display: inline-block + white-space: nowrap 组合方案；确保 .chart-container 保留 overflow-x: auto，以启用水平滚动能力；.chart-line 的 bottom 值基于 .chart 的高度（100行网格）计算，bottom: 50% 即表示从底部向上占 50%，等效于第51行起始位置（因 grid-row: 1/101 占满全部100行）；避免对 .chart-line 设置 width: 100vw —— 这会强制使用视口宽度，而非内容实际宽度，导致在滚动时参考线错位或截断。
通过这一调整，.chart-line 将精准横跨所有柱子的总宽度，并随 style="bottom: X%" 动态锚定在任意垂直位置，真正实现可滚动、可精确定位的专业级图表参考线。
