如何使顶部溢出以使反向滚动工作

Question

以下代码无法滚动，因为overflow: auto不允许溢出到顶部。是否还有一种方法可以允许使用纯css、在这里滚动，而不需要额外的容器div

.container {
    display: flex;
    flex-wrap: wrap-reverse;
    overflow-y: auto;
    height: 150px;
    width: 150px;
    background-color: rgba(0,0,0,0.5);
}
.container div {
    min-width: 100px;
    min-height: 100px;
    margin: 10px;
    background-color: rgba(0,0,0,0.5);
}

<div class="container">
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
</div>

编辑：这似乎是浏览器的错误。

Firefox错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1042151

边缘用户语音：https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/10461201-support-reverse-scrolling-when-justify-content-fl

Answer 1

flex-wrap: wrap-reverse（多行）似乎有问题，因为它根本不允许滚动。

对于您的特定用例（固定宽度，一个项目横跨），您可以将flex-direction与column-reverse一起使用，并获得您想要的相同结果。

代码段：

.container {
    display: flex; flex-direction: column-reverse;
    height: 150px; width: 150px;
    overflow: auto; background-color: rgba(0,0,0,0.5);
}
.container div {
    min-width: 100px; min-height: 100px; margin: 10px;
    background-color: rgba(0,0,0,0.5); color: #fff;
}
.container div:nth-child(odd) { background-color: #33a; }

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>