html - 设置溢出滚动后，出现空滚动条但元素仍然溢出

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 中有 absolute。