div无法完全横向滚动 左侧图片内容无法访问原因咨询

问题产生原因 #

• 核心问题是#parent和#extra-wrapper两个元素都设置了justify-content: center属性。当flex容器的子元素总宽度超过容器本身宽度时，justify-content: center会让所有子元素整体向容器中心对齐，这时候子元素超出容器左侧的部分会被视为「容器外的溢出区域」，浏览器的横向滚动逻辑默认不会覆盖这部分区域，所以无法滚动到最左侧的图片。
• 次要影响因素：#extra-wrapper设置的min-width: 100%会干扰宽度计算，当子元素总宽度超过父容器宽度时，会进一步压缩左侧可滚动空间。

修复方案 #

只需修改两处CSS即可解决问题：

1. 删除#parent的justify-content: center属性，flex布局默认的justify-content: flex-start即可满足需求
2. 删除#extra-wrapper的justify-content: center和min-width: 100%属性，保留默认的左对齐逻辑

修复后的参考代码：

#parent{
   display: flex;
   align-items: center;
   position: relative;
   width: 100%;
   max-width: 800px;
   height: 100%;
   z-index: 4;
   border-radius: 12px;
   border: 1px solid rgba(162,207,242,0.17);
   overflow-x: auto;
   padding: 1.25rem;
}

#extra-wrapper{
   position: relative;
   display: flex;
   align-items: center;
   flex-wrap: no-wrap;
   flex-direction: row;
   gap: 0.25rem;
   max-width: unset;
}

#image{
   position: relative;
   width: 125px;
   height: 125px;
   border-radius: 20px;
   background-color: #f6f6f6;
   transition: all 0.2s ease;
   padding: 0.25rem;
   z-index: 5;
   cursor: pointer;
   border-right: 1px solid rgba(162,207,242,0.25);
}

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