CSS Overflow仅支持向右滚动，无法向左滚动的问题排查

首先，你的水平滚动异常问题根源在于flex容器的justify-content: center属性。

当你给#preface设置justify-content: center时，flex项目会在容器内居中对齐。当内容总宽度超过容器宽度时，整个内容组会被放在容器的中间位置——这就导致左侧的内容（比如第一张肖像图）被推出了容器的可视区域，而滚动容器的初始滚动位置是居中的（相当于scrollLeft被自动设置为内容溢出部分的一半）。这时候你看起来只能向右滚动查看右侧内容，即便理论上可以向左滚动到最左端，这种不符合直觉的初始位置也会让你误以为无法查看左侧裁剪内容。

修复步骤： #

1. 修改#preface的CSS，移除justify-content: center，或者替换为justify-content: flex-start：

   #preface { 
       border-top: 2px solid black; 
       display: flex; 
       overflow: auto; 
       /* 移除justify-content: center，或者替换成下面这行 */
       justify-content: flex-start; 
       align-items: center; 
       padding-top: 2ex; 
       padding-bottom: 2ex; 
   }
   

   这样flex项目会从容器左侧开始排列，当内容溢出时，滚动条初始位置在左端，你可以正常向右滚动查看所有内容，也能随时向左滚动回起点。

2. 另外，你的CSS里有个小语法错误：preface .license缺少了ID选择器的#，建议修正它（不影响滚动问题，但能避免其他潜在样式异常）：

   #preface .copyright, #preface .license { text-align: center; }
   

额外优化（可选）： #

如果你希望在容器宽度足够容纳所有内容时保持居中显示，仅在宽度不足时启用左对齐滚动，可以通过媒体查询实现：

/* 当容器宽度足够容纳全部内容时，保持居中对齐 */
@media (min-width: 900px) {
    #preface {
        justify-content: center;
    }
}
/* 容器宽度不足时，左对齐并允许滚动 */
@media (max-width: 899px) {
    #preface {
        justify-content: flex-start;
    }
}

你可以根据实际内容的总宽度调整媒体查询的阈值。

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