将溢出设置为滚动后，会出现一个空的滚动条，但元素仍然溢出

Question

在下面的代码中，我尝试将.deck-wrapper的溢出属性设置为滚动，但是.deck-card似乎超出了网站的框架。

<main>
    <section class="article-deck">
        <div class="deck-wrapper">
            <div class="deck-starter"></div>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
        </div>
    </section>
</main>

这是SASS / CSS代码：

.article-deck {
    width: inherit;
    overflow: scroll;
}
.deck-wrapper {
    background-color: #eeeeee;
    overflow: scroll;
}
.deck-starter {
    float: left;
    height: $deck-card-height;
    width: $deck-card-width;
    background-color: $color-light-green;
    border-radius: 20px;
}
.deck-card {

    float: left;
    position: absolute;
    height: $deck-card-height;
    width: $deck-card-width;

    border: 1px solid black;
    background-color: $color-white;
    border-radius: 20px;
    // box-shadow: 2px 15px 15px 10px #777777;
    // z-index: $deck-card-max-z-index;

    @for $i from 1 through $deck-card-num {
        &:nth-child(#{$i}) {
            left: $deck-card-offset * $i;
            // z-index: $i * 15;   
        }
    }
    &:hover {
        transform: translate(3rem, -3rem);
        transition: all 0.2s;
        // z-index: $deck-card-max-z-index + 1;
    }

}

Answer 1

变量值未知。我认为是因为.deck-card具有绝对值。