使用flex wrap-reverse的水平滚动不起作用

I have this code and I'm okay with it. But I have a problem with scrolling.

我有这个代码，我很好。但我有滚动问题。

I want to give a width to the .b class and I want horizontal scroll.

我想给.b类增加一个宽度，我想要水平滚动。

I try to add this code to the .b class:

我尝试将此代码添加到.b类：

width: 500px;
overflow-x: scroll;

But it doesn't work. Is there a bug with flex wrap-reverse with scrolling?

但它不起作用。有滚动的flex wrap-reverse错误吗？

This is an interesting case I think. Any idea for this problem?

我认为这是一个有趣的案例。对这个问题有什么想法吗？

NOTE: I need the orange boxes exactly where they are now. I cannot change order or wrap positions. I only need horizontal scroll.

注意：我需要橙色盒子的确切位置。我无法改变订单或包裹头寸。我只需要水平滚动。

.a {
  width: 100%;
}

.b {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  height: 600px;
  align-content: flex-start;
  width: 500px;
  overflow-x: scroll;
}

.c {
  width: 200px;
  height: 200px;
  background: orange;
}

.w {
  width: 200px;
  margin: 5px;
}

span {
  display: block;
}

<div class="a">
  <div class="b">
    <div class="w">
      <span>AAAA</span>
      <span>1</span>
      <div class="c">
      </div>
    </div>
    <div class="w">
      <span>AAAA</span>
      <span>2</span>
      <div class="c">
      </div>
    </div>
    <div class="w">
      <span>AAAA</span>
      <span>3</span>
      <div class="c">
      </div>
    </div>
    <div class="w">
      <span>AAAA</span>
      <span>4</span>
      <div class="c">
      </div>
    </div>
    <div class="w">
      <span>AAAA</span>
      <span>5</span>
      <div class="c">
      </div>
    </div>
  </div>
</div>

1 个解决方案

#1

Scrolling in CSS is a function of the overflow property.

滚动CSS是overflow属性的函数。

However, overflow only works in the direction of the text direction.

但是，溢出仅在文本方向的方向上起作用。

With wrap-reverse the flex items are laid out in a direction opposite the text direction (LTR), so overflow doesn't apply and scrollbars can't work.

使用wrap-reverse，flex项目以与文本方向（LTR）相反的方向布局，因此溢出不适用，滚动条无法工作。

More details and possible workarounds here:

更多细节和可能的解决方法：

Can a scroll bar appear for content overflowing the browser window to the left?
对于溢出浏览器窗口左侧的内容，是否可以显示滚动条？
Overflow auto not working with justify-content: flex-end
溢出自动无法使用justify-content：flex-end

#1