Html 溢出-x不'；不要在整个宽度上滚动

我正在做一个纸牌游戏，如果窗口宽度不够宽，我需要能够滚动所有纸牌

HTML:

SCSS

div#hand{
位置：固定；
底部：-200px；
左：0；
宽度：100vw；
高度：自动；
显示器：flex；
证明内容：中心；
溢出-x：自动；
溢出y：可见；
>分区包装器{
显示器：flex；
弯曲方向：行；
左边距：200px；
右边距：200px；
分区卡{
光标：指针；
位置：相对位置；
宽度：230px；
高度：350px；
保证金：0；
边界半径：3px；
边框样式：虚线；
边框宽度：5px；
边框颜色：#fff；
盒影：0px 0px 10px rgba（0,0,0,0.5）；
边缘顶部：60像素；
底部：0；
显示：内联块；
过渡：0.4s；
&：不是（：第一个孩子）{
左边距：-160px；
}
&：悬停：非（：最后一个子项）{
右边距：160px；
}
&：悬停{
底部：60px；
}
}
}
}

这将导致渲染以下内容：

这很酷，但当我缩小浏览器宽度时，问题就来了：

我现在一直滚动到左边，但是注意第一张图片上有数字1的卡片是如何不可见的。如果向右滚动，则显示最后一张没有问题的卡：

有没有一种方法可以让滚动条在每张卡片上滚动？ 我尝试在左侧和右侧添加边距，或者在父div中添加填充，但似乎没有任何效果：c

---

提前感谢您的帮助^ ^

我找到了您问题的答案，它与您的原始代码具有相同的样式。我添加了一些用于测试的演示编号

div#hand{
位置：固定；
底部：-200px；
左：0；
宽度：100vw；
高度：自动；
显示器：flex；
证明内容：中心；
溢出-x：自动；
溢出y：自动；
}
分区包装器{
背景色：#333；
溢出：自动；
空白：nowrap；
}
分区卡{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px；
文字装饰：无；
}
div#hand>div.wrapper div.card{
光标：指针；
位置：相对位置；
宽度：230px；
高度：350px；
保证金：0；
边界半径：3px；
边框样式：虚线；
边框宽度：5px；
边框颜色：#fff；
背景色：黑色；
盒影：0px 0px 10px rgba（0,0,0,0.5）；
边缘顶部：60像素；
底部：0；
显示：内联flex；
对齐项目：居中；
证明内容：中心；
过渡：0.4s；
}
div#hand>div.wrapper div.card:not（：第一个孩子）{
左边距：-160px；
}
div#hand>div.wrapper div.card:悬停：非（：最后一个子项）{
右边距：160px；
}
div#hand>div.wrapper div.card:悬停{
底部：60px；
}
代码

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20

我找到了你问题的答案，它与你原来的代码风格相同。我添加了一些用于测试的演示编号

div#hand{
位置：固定；
底部：-200px；
左：0；
宽度：100vw；
高度：自动；
显示器：flex；
证明内容：中心；
溢出-x：自动；
溢出y：自动；
}
分区包装器{
背景色：#333；
溢出：自动；
空白：nowrap；
}
分区卡{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px；
文字装饰：无；
}
div#hand>div.wrapper div.card{
光标：指针；
位置：相对位置；
宽度：230px；
高度：350px；
保证金：0；
边界半径：3px；
边框样式：虚线；
边框宽度：5px；
边框颜色：#fff；
背景色：黑色；
盒影：0px 0px 10px rgba（0,0,0,0.5）；
边缘顶部：60像素；
底部：0；
显示：内联flex；
对齐项目：居中；
证明内容：中心；
过渡：0.4s；
}
div#hand>div.wrapper div.card:not（：第一个孩子）{
左边距：-160px；
}
div#hand>div.wrapper div.card:悬停：非（：最后一个子项）{
右边距：160px；
}
div#hand>div.wrapper div.card:悬停{
底部：60px；
}
代码

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20

 <div id="hand">
   <div class="wrapper">
     <div class="card">
       <h2>1</h2>
     </div>
     <div class="card">
       <h2>2</h2>
     </div>
     <div class="card">
       <h2>3</h2>
     </div>
     <div class="card">
       <h2>4</h2>
     </div>
     <div class="card">
       <h2>5</h2>
     </div>
     <div class="card">
       <h2>6</h2>
     </div>
     <div class="card">
       <h2>7</h2>
     </div>
     <div class="card">
       <h2>8</h2>
     </div>
     <div class="card">
       <h2>9</h2>
     </div>
     <div class="card">
       <h2>10</h2>
     </div>
     <div class="card">
       <h2>11</h2>
     </div>
     <div class="card">
       <h2>12</h2>
     </div>
     <div class="card">
       <h2>13</h2>
     </div>
     <div class="card">
       <h2>14</h2>
     </div>
     <div class="card">
       <h2>15</h2>
     </div>
     <div class="card">
       <h2>16</h2>
     </div>
     <div class="card">
       <h2>17</h2>
     </div>
     <div class="card">
       <h2>18</h2>
     </div>
     <div class="card">
       <h2>19</h2>
     </div>
     <div class="card">
       <h2>20</h2>
     </div>
   </div>
 </div>
 </div>