Horizontal scroll with flex wrap-reverse doesn't work

Question

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.

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

width: 500px;
overflow-x: scroll;

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

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>

@javauser35 the wrapper element of .b should have less width than .b for the overflow css to work. — priyadarshi swain, Nov 23 '17 at 13:28

score 1 · Accepted Answer · answered Nov 23 '17 at 15:45

Scrolling in CSS is a function of the overflow property.

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.

More details and possible workarounds here:

Horizontal scroll with flex wrap-reverse doesn't work

1 Answers1

Linked