当使用 `position: absolute` 的水平参考线（如 `.chart-line`）配合横向滚动图表时，若 `.chart` 宽度未显式撑开，会导致参考线仅覆盖可视区域而非全部子元素宽度；解决关键是让 `.chart` 依据内容自动扩展（`width: max-content`），同时修正定位逻辑。
在构建响应式柱状图（尤其是支持横向滚动的多列图表）时，常需添加一条贯穿全宽的水平参考线（例如表示阈值、均值或目标线）。但开发者常遇到一个典型问题：尽管为 .chart-line 设置了 min-width: 100% 和 position: absolute，该线条却无法延伸至所有柱子所在的完整宽度，而仅覆盖 .chart-container 的初始视口宽度——即使容器已启用 overflow-x: auto。
根本原因在于：.chart 默认采用 width: auto（即块级元素的常规行为），其计算宽度受父容器 .chart-container 限制，不会主动扩展以容纳所有 grid-column 子项。而 .chart-line 是绝对定位元素，其 100% 宽度是相对于 .chart 的计算宽度（即被截断的“可视宽度”），而非所有 .bar 实际占据的总宽度。因此，当柱子因数量多而溢出并触发横向滚动时，.chart-line 并不会随之延伸。
✅ 正确解决方案如下：
- 强制 .chart 宽度由内容决定：添加 width: max-content，使其宽度等于所有网格列（.bar）的总宽度（含 grid-column-gap），从而真实反映整个数据区域；
- 修正 .chart-line 的定位方式：移除错误的 right: -100%（该写法不仅无效，还可能引发意外偏移），改为标准的 left: 0; right: 0;，确保其 100% 覆盖 .chart 的当前计算宽度；
- 保留 bottom: X% 的动态定位能力：由于 .chart 高度固定（height: 200px）且行网格为 repeat(100, 1fr)，bottom: 50% 仍可精准对应第 50 行位置（即 50% 高度处），无需额外调整。
以下是修复后的核心 CSS 片段：
立即学习“前端免费学习笔记（深入）”；
.chart-container {
overflow-x: auto;
padding-top: 5px;
}
.chart {
height: 200px;
width: max-content; /* ✅ 关键：使容器宽度适配所有子列 */
display: grid;
grid-column-gap: 5px;
grid-template-rows: repeat(100, 1fr);
position: relative;
}
.chart-line {
min-width: 100%;
border-bottom: 2px solid red;
position: absolute;
left: 0; /* ✅ 修正：与 right: 0 配合实现 100% 宽度 */
right: 0; /* ✅ 移除原错误的 right: -100% */
/* bottom 值仍可通过内联 style 动态设置，如 style="bottom: 50%" */
}? 注意事项：
- max-content 在现代浏览器中兼容性良好（Chrome 65+、Firefox 61+、Safari 14.1+），若需支持旧版 Safari，可考虑用 display: inline-grid + white-space: nowrap 替代，但语义和维护性略低；
- 确保 .chart-line 始终置于 .bar 元素之前（DOM 顺序靠前），避免被遮挡；若需层级控制，可显式设置 z-index: 1；
- 若后续需支持动态增删柱子，建议通过 JavaScript 更新后调用 chart.style.width = 'max-content' 触发重排（多数情况下 CSS 自动响应）；
- grid-row: 1/101 的写法依赖于 repeat(100, 1fr) —— 即共 100 行，因此起始行为 1，结束行为 101（包含第 100 行），逻辑严谨，无需修改。
通过以上调整，.chart-line 将真正横跨所有柱子的总宽度，并随横向滚动无缝呈现，同时保持 bottom: X% 的语义化垂直定位能力，为数据可视化提供可靠、可维护的参考线基础。
