带水平滚动条的Div左侧内容被裁剪，无法滚动至最左端的原因

当屏幕宽度过窄时，可滚动容器的左侧内容会被裁剪，水平滚动条虽已出现，但无法滚动到最左端。

问题代码 #

CSS

.player {
    text-align: center;
    font-size: 12px;
    width: 9rem;
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

.row {
    display: flex;
}

.container {
    overflow-x: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-x: auto;
}

.player-container {
    display: flex;
}

HTML

<main style="width: 400px">
    <div class="container">
        <div class="player-container">
            <p class="player">Preston Hilton</p>
        </div>
        <div class="player-container">
            <p class="player">Peregrine Jewell</p>
            <p class="player">Waldo Symons</p>
        </div>
        <div class="player-container">
            <p class="player">Seymour Nicholson</p>
            <p class="player">Sheard Tyler</p>
            <p class="player">Thomas Post</p>
        </div>
        <div class="player-container">
            <p class="player">Landen Dean</p>
            <p class="player">Koda Abbott</p>
            <p class="player">Quentin Berry</p>
            <p class="player">Anson Dickinson</p>
        </div>
        <div class="player-container">
            <p class="player">Oscar Kelsey</p>
            <p class="player">-</p>
            <p class="player">-</p>
            <p class="player">-</p>
            <p class="player">-</p>
        </div>
    </div>
</main>

原因分析 #

核心问题出在.container的align-items: center属性上：

• .container是flex-direction: column的弹性容器，align-items: center会让所有子元素（.player-container）在水平方向上居中对齐。
• 当某个.player-container的总宽度超过.container的宽度时，居中对齐会导致子元素向左溢出的部分被容器裁剪。
• 滚动容器的滚动范围基于子元素的布局位置计算，居中后的子元素左侧超出容器的部分不在滚动视口的有效范围内，因此无法通过滚动显示。

解决方案 #

去掉.container中的align-items: center，或替换为align-items: flex-start，让子元素在水平方向上左对齐，这样内容超出容器宽度时，滚动条就能正常滚动到最左端。

修改后的.container CSS：

.container {
    overflow-x: auto;
    display: flex;
    align-items: flex-start; /* 或直接删除align-items属性 */
    flex-direction: column;
}

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