CSS问题：.chart-line无法铺满可滚动父div宽度且需保留定位控制

问题核心：.chart-line 作为水平参考线，无法铺满带横向滚动的父容器的全部内容宽度，同时需要保留内联样式 style="bottom: 50%" 控制垂直位置。

解决方案调整步骤 #

• 让.chart的宽度自适应所有柱子的总宽度，而非仅父容器的可视宽度
• 修正.chart-line的定位样式，确保它能铺满.chart的完整宽度

修改后的完整代码 #

CSS 代码

.chart-container {
    overflow-x: auto;
    padding-top: 5px;
}
.chart {
    height: 200px;
    display: grid;
    grid-column-gap: 5px;
    grid-template-rows: repeat(100, 1fr);
    position: relative;
    width: fit-content; /* 关键：让chart宽度自适应内容总宽度 */
}
.chart-line {
    border-bottom: 2px solid red;
    position: absolute;
    left: 0;
    right: 0; /* 铺满整个chart宽度 */
    bottom: 0; /* 由内联样式覆盖 */
}
.chart .bar {
    grid-row: 1/101;
    border-radius: 5px 5px 0 0;
    width: 60px;
}
.chart .bar.bar-50 {
    grid-row-start: 51;
}
.chart .bar.bar-100 {
    grid-row-start: 1;
}
.chart .bar {
    background-color: #0074d9;
}

HTML 代码

<div class="chart-container">
    <div class="chart">
        <div class="chart-line" style="bottom: 50%"></div> <!-- 水平参考线，保留内联样式控制位置 -->
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-100"></div>
        <div class="bar bar-50"></div>
        <div class="bar bar-50"></div>
    </div>
</div>

原理说明 #

• 原.chart是块级元素，宽度默认继承父容器可视宽度，内部柱子溢出时，.chart的实际宽度未跟随内容扩展，导致绝对定位的.chart-line只能覆盖容器可视宽度。
• 添加width: fit-content后，.chart宽度自适应所有柱子的总宽度，此时.chart-line通过left:0; right:0可铺满.chart的完整内容宽度。
• 内联样式style="bottom:50%"依然生效，因为.chart-line的垂直定位基于.chart的高度（200px）计算，完全符合需求。

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