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 {&nbsp; position: fixed;&nbsp; bottom: -200px;&nbsp; left: 0;&nbsp; width: 100vw;&nbsp; height: auto;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; overflow-x: auto;&nbsp; overflow-y: auto;}div.wrapper {&nbsp; background-color: #333;&nbsp; overflow: auto;&nbsp; white-space: nowrap;}div.card {&nbsp; display: inline-block;&nbsp; color: white;&nbsp; text-align: center;&nbsp; padding: 14px;&nbsp; text-decoration: none;}div#hand > div.wrapper div.card {&nbsp; cursor: pointer;&nbsp; position: relative;&nbsp; width: 230px;&nbsp; height: 350px;&nbsp; margin: 0;&nbsp; border-radius: 3px;&nbsp; border-style: dotted;&nbsp; border-width: 5px;&nbsp; border-color: #fff;&nbsp; background-color: black;&nbsp; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);&nbsp; margin-top: 60px;&nbsp; bottom: 0;&nbsp; display: inline-flex;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; transition: 0.4s;}div#hand > div.wrapper div.card:not(:first-child) {&nbsp; margin-left: -160px;}div#hand > div.wrapper div.card:hover:not(:last-child) {&nbsp; margin-right: 160px;}div#hand > div.wrapper div.card:hover {&nbsp; bottom: 60px;}Code&nbsp;<div id="hand">&nbsp; &nbsp;<div class="wrapper">&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>1</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>2</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>3</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>4</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>5</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>6</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>7</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>8</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>9</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>10</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>11</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>12</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>13</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>14</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>15</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>16</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>17</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>18</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>19</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<div class="card">&nbsp; &nbsp; &nbsp; &nbsp;<h2>20</h2>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp;</div>&nbsp;</div>&nbsp;</div>