Overflow-x 不会滚动整个宽度

Question

我正在开发一款纸牌游戏，如果窗口宽度不够宽，则需要能够滚动所有纸牌。HTML： <div id="hand">    <div class="wrapper">      <div class="card">        <!-- Cards content -->      </div>      <div class="card">        <!-- Cards content -->      </div>      <div class="card">        <!-- Cards content -->      </div>      <!-- Repeat until 20 cards -->    </div> </div>社会保障体系    div#hand {        position: fixed;        bottom: -200px;        left: 0;        width: 100vw;        height: auto;        display: flex;        justify-content: center;        overflow-x: auto;        overflow-y: visible;        >div.wrapper {            display: flex;            flex-direction: row;            margin-left: 200px;            margin-right: 200px;            div.card {                cursor: pointer;                position: relative;                width: 230px;                height: 350px;                margin: 0;                border-radius: 3px;                border-style: dotted;                border-width: 5px;                border-color: #fff;                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);                margin-top: 60px;                bottom: 0;                display: inline-block;                transition: 0.4s;                &:not(:first-child) {                    margin-left: -160px;                }                &:hover:not(:last-child) {                    margin-right: 160px;                }                &:hover {                    bottom: 60px;                }            }        }    }这会导致呈现以下结果： 这很酷，但当我缩小浏览器宽度时，问题就出现了： 我目前一直滚动到左侧，但请注意第一张图片上的编号为 1 的卡片是如何不可见的。如果我向右滚动，最后一张卡片将毫无问题地显示： 有没有办法让滚动条真正滚动浏览每张卡片？我尝试向左右添加边距或向父 div 添加填充，但似乎没有任何效果：c提前感谢您的帮助^^

Answer 1

我找到了您问题的答案，它与您的原始代码具有相同的风格。我添加了一些演示号码进行测试。

div#hand {

  position: fixed;

  bottom: -200px;

  left: 0;

  width: 100vw;

  height: auto;

  display: flex;

  justify-content: center;

  overflow-x: auto;

  overflow-y: auto;

}

div.wrapper {

  background-color: #333;

  overflow: auto;

  white-space: nowrap;

}

div.card {

  display: inline-block;

  color: white;

  text-align: center;

  padding: 14px;

  text-decoration: none;

}

div#hand > div.wrapper div.card {

  cursor: pointer;

  position: relative;

  width: 230px;

  height: 350px;

  margin: 0;

  border-radius: 3px;

  border-style: dotted;

  border-width: 5px;

  border-color: #fff;

  background-color: black;

  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

  margin-top: 60px;

  bottom: 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  transition: 0.4s;

}

div#hand > div.wrapper div.card:not(:first-child) {

  margin-left: -160px;

}

div#hand > div.wrapper div.card:hover:not(:last-child) {

  margin-right: 160px;

}

div#hand > div.wrapper div.card:hover {

  bottom: 60px;

}

Code

 <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>