html - 即使在添加溢出 css 后，Div 也不可滚动

Question

这是我的课:

.ticker-container {
    height: 100%;
    max-height: 40%;
    overflow: auto;
}

想法是“div”容器应该是可滚动的。

Screenshot

但出于某些原因，虽然它设置了 div 本身的最大尺寸，但并没有使其可滚动。

html 看起来像这样:

<div class="row ticker-container">
        <div class="col s6" id="ticker_container">
        </div>
        <div class="col s6" id="candidates">
        </div>
    </div>

我正在将内容附加到 ticker_container。我已经尝试将类添加到内部 div 容器中，但它仍然没有使 div 容器可滚动。任何帮助，将不胜感激。

这是生产中的网站:https://smag.2501.io/

编辑:要观察行为，请在第二个输入字段中尝试输入“TESTER”，然后按回车键

编辑:

.snowcontainer {
    background-image: radial-gradient(50% 176%, black 80%, black 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-content: center;

    &__content {
        position: relative;
        align-self: center;
        padding: 3rem 0;
    }
}

.snow {
    position: absolute;
    min-width: 100vw;
    min-height: 100vh;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.snow .svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

#snow-top-layer {
    will-change: transform;
    transform: translateY(-768px);
    animation: fall 22.5s infinite linear;
}

#snow-bottom-layer {
    will-change: transform;
    transform: translateY(-768px);
    animation: fall 45s infinite linear;
}

问题是我的雪容器，它挡住了内容。添加了 z-index 并解决了问题

Answer 1

添加到你的div.content position: relative;和一些 z-index。 div.snow 覆盖了元素。