伪表格横向滚动时背景色无法延伸至溢出区域的问题求助

问题背景 #

我为学区项目制作了一个伪表格（出于设计选择未使用HTML table），点击单元格可复制文本、提示用户后恢复原文本与背景色。因表格尺寸较大，特意设置overflow-x实现横向滚动以查看更多列，这是一项功能而非效果。我为表头行设置了独立背景色，并用CSS的:nth-child()实现行背景色白灰交替。

目前出现问题：横向滚动后，行背景色无法延伸至X轴溢出区域，甚至在溢出元素中途截断。从事Web应用开发多年从未遇到此类问题，对此完全困惑。怀疑这与行的父元素设置75%宽度有关，但希望保留该布局，尝试添加额外容器未解决问题，特求助该CSS问题的原因与解决方法。

代码示例 #

HTML #

<div class="cells-list col" id="students">
    <div class="cells-rows">

        <div class="cells-row header-row row" id="main-row">
            <p class="main-cell cell">First</p>
            <p class="main-cell cell">Last</p>
            <p class="main-cell cell">Student ID</p>
            <p class="main-cell cell">Email</p>
            <p class="main-cell cell">Email Pass</p>
            <p class="main-cell cell">Guardian Email</p>
            <p class="main-cell cell">Chromebook #</p>
            <p class="main-cell cell">Homeroom</p>
            <p class="main-cell cell">PowerSchool Username</p>
            <p class="main-cell cell">PowerSchool Pass</p>
            <p class="main-cell cell">Canvas Username</p>
            <p class="main-cell cell">Canvas Pass</p>
            <p class="main-cell cell">Savvas Username</p>
            <p class="main-cell cell">Savvas Pass</p>
            <p class="main-cell cell">MGH Username</p>
            <p class="main-cell cell">MGH Pass</p>
        </div>

        <div class="cells-row row">
            <p class="cell">First</p>
            <p class="cell">Last</p>
            <p class="cell">Student ID</p>
            <p class="cell">Email</p>
            <p class="cell">Email Pass</p>
            <p class="cell">Guardian Email</p>
            <p class="cell">Chromebook #</p>
            <p class="cell">Homeroom</p>
            <p class="cell">PowerSchool Username</p>
            <p class="cell">PowerSchool Pass</p>
            <p class="cell">Canvas Username</p>
            <p class="cell">Canvas Pass</p>
            <p class="cell">Savvas Username</p>
            <p class="cell">Savvas Pass</p>
            <p class="cell">MGH Username</p>
            <p class="cell">MGH Pass</p>
        </div>

        <div class="cells-row row">
            <p class="cell">First</p>
            <p class="cell">Last</p>
            <p class="cell">Student ID</p>
            <p class="cell">Email</p>
            <p class="cell">Email Pass</p>
            <p class="cell">Guardian Email</p>
            <p class="cell">Chromebook #</p>
            <p class="cell">Homeroom</p>
            <p class="cell">PowerSchool Username</p>
            <p class="cell">PowerSchool Pass</p>
            <p class="cell">Canvas Username</p>
            <p class="cell">Canvas Pass</p>
            <p class="cell">Savvas Username</p>
            <p class="cell">Savvas Pass</p>
            <p class="cell">MGH Username</p>
            <p class="cell">MGH Pass</p>
        </div>

        <!-- Repeating rows, irrelevant for this post -->

    </div>
</div>

SCSS #

.cells-list {
    flex-direction: column !important;
    gap: 0 !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    .cells-rows {
        flex-direction: column !important;
        justify-content: flex-start;
        max-width: 75%;
        overflow: auto;
        .cells-row {
            flex-direction: row !important;
            justify-content: flex-start;
            &:first-child {
                background-color: gray !important;
            }
            &:nth-child(even) {
                background-color: lightgray;
            }
            &:nth-child(odd) {
                background-color: white;
            }
            .cell {
                justify-content: center;
                align-items: center;
                min-width: 150px;
                width: 150px;
                max-width: 150px;
                padding: 0.25rem;
                padding-inline: 0.5rem;
                border: 1px solid black;
                user-select: none;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            .cell:not(.main-cell) {
                cursor: pointer;
                &:active {
                    //background-color: $s1;
                    border: 2px solid black;
                }
                &:focus {
                    border: 2px solid black;
                }
            }
        }
        #main-row {
            .cell {
                font-weight: bold;
            }
        }
    }
}

问题演示 #

问题原因 #

核心问题出在flex容器的宽度计算逻辑：

• .cells-rows设置了max-width:75%且是纵向flex容器，内部的.cells-row作为横向flex容器，默认宽度仅撑满父容器的可视区域（75%），不会自动跟随内部单元格的总宽度扩展
• 当内部单元格总宽度超过父容器可视宽度时，单元格会溢出，但.cells-row的宽度并未同步扩展，导致背景色只覆盖父容器可视区域，滚动后溢出部分无背景

解决方法 #

只需修改.cells-row的CSS，添加width: fit-content让行宽度自适应内部所有单元格的总宽度，就能让背景色覆盖整个行的所有区域，同时保留.cells-rows的75%宽度布局。

修改后的SCSS关键代码：

.cells-row {
    flex-direction: row !important;
    justify-content: flex-start;
    width: fit-content; // 新增这一行，让行宽度自适应内容
    &:first-child {
        background-color: gray !important;
    }
    &:nth-child(even) {
        background-color: lightgray;
    }
    &:nth-child(odd) {
        background-color: white;
    }
    // 其他原有样式保持不变
}

修改后，横向滚动时行背景色会完全延伸到所有单元格的宽度，不会再出现截断问题，同时整体布局的75%宽度限制也能保留。

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