Flexbox设置justify-content:space-evenly后溢出内容向左溢出无法访问

问题原因 #

1. 核心布局问题：你给可滚动的flex容器#penDisplay设置了justify-content: space-evenly，当子元素总宽度超过容器宽度时，浏览器会将所有子元素作为一个整体居中对齐，导致内容同时向左右两侧溢出。但浏览器的横向滚动条默认仅支持访问右侧溢出内容，左侧溢出部分无法通过滚动查看。
2. HTML规范问题：你循环渲染多个PenCard组件时都使用了相同的id="penCard"，HTML要求同一页面内id必须唯一，会导致CSS选择、DOM操作异常，需要改为class。

修复方案 #

第一步：修正id重复问题 #

将PenCard组件中的id="penCard"改为className="penCard"，对应CSS选择器从#penCard调整为.penCard。

第二步：调整布局结构与CSS #

我们通过嵌套一层单独负责布局的flex容器解决对齐和滚动的冲突，外层容器仅负责滚动和定位：

修改后的CSS代码：

/* 外层容器仅负责滚动和定位，移除justify-content */
#penDisplay{
        overflow-x: auto;
        overflow-y: hidden; /* 可选，避免出现不必要的垂直滚动条 */
        position: absolute;
        top: 15%;
        left: 2%;
        width: 96%;
        height: 65%;
}
/* 新增内层flex容器，专门负责子元素对齐 */
.pen-inner-wrap {
        display: flex;
        justify-content: space-evenly;
        width: fit-content; /* 宽度跟随子元素总宽度自适应 */
        min-width: 100%; /* 子元素不足时撑满外层容器，保证space-evenly生效 */
        height: 100%;
        padding: 0 10px; /* 可选，避免滚动到边缘时卡片贴边 */
}
.penCard{
        color: #CECECE;
        padding: 15px;
        padding-top: 0px;
        flex-shrink: 0;
        margin-right: 55px;
        width: 15%;
        height: 60%;
        background: #2D3344;
        border: 11px solid #004B93;
        box-sizing: border-box;
        border-radius: 53px;
}
/* 移除最后一个卡片的右边距，避免末尾多余空白 */
.penCard:last-child {
        margin-right: 0;
}

修改后的JSX结构：

<div id="penDisplay">
  <div className="pen-inner-wrap">
    {this.renderCard(1)}
    {this.renderCard(2)}
    {this.renderCard(3)}
    {this.renderCard(4)}
    {this.renderCard(5)}
    {this.renderCard(6)}
    {this.renderCard(7)}
  </div>
</div>

修改后即可实现预期效果：子元素总宽度小于容器宽度时均匀居中排布，溢出时可横向滚动查看所有内容。

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