如何使顶部溢出来进行反向滚动工作？

Question

以下代码无法滚动，因为overflow: auto不允许溢出到顶端。是否仍然有一种方法可以在这里滚动纯CSS c,没有额外的容器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>

编辑： 看来，这是浏览器的bug。

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

边缘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>