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

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

Edge UserVoice：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>

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

How can I make overflowing on top side to make reversed scrolling work?

html

css

flexbox