无法完全水平滚动 div

Question

我正在尝试创建一个水平滑块，用于滚动给定宽度的 div 中的所有图像

注意：之前在垂直滚动时遇到了同样的问题，但使用额外的包装器 div 解决了它。 但类似的不适用于水平滚动。

HTML：

CSS

#parent{
   display: flex;
   align-items: center;
   justify-content: 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;
   justify-content: center;
   flex-wrap: no-wrap;
   flex-direction: row;
   min-width: 100%;
   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);
}

---

问题来了

div 中最左侧可滚动的第一张图片位于索引 4 处（黑色边框突出显示），第一张图片不可接近。

它可以完全向右滚动，但不能向左滚动。

谁能解释一下，为什么会这样？

Answer 1

因为这是滚动条的默认设置，所以它们不能在中间，请使用 javascript。

Answer 2

你应该使用overflow-x: scroll;