Scroll with wrap-Reverse css

Question

I have the following structure.

.sideBar{
    padding: 0 !important;
    margin: 0 !important;
    background-color: #fff;
    overflow-y: auto;
    border: 1px solid #f7f7f7;
    height: 100px;
    display: flex;
    flex-wrap: wrap-reverse;
    width: 100px;
    overflow-y: scroll;
}

.row{
  width: 48px;
  border: 1px solid black;
}

<div class='sideBar'>
  <div class="row" style="order: 8">8</div>
  <div class="row" style="order: 2">2</div>
  <div class="row" style="order: 7">7</div>
  <div class="row" style="order: 10">10</div>
  <div class="row" style="order: 3">3</div>
  <div class="row" style="order: 1">1</div>
  <div class="row" style="order: 9">9</div>
  <div class="row" style="order: 4">4</div>
  <div class="row" style="order: 5">5</div>
  <div class="row" style="order: 6">6</div>
</div>

The display: flex; works well.
The flex-wrap: wrap-reverse; is also ok, ordering in reverse order the divs according to the property order.

But the overflow-y: scroll; is not working.
How to get around it or do it better ?

**Edit**:
I realized that by putting `flex-wrap: wrap;`, it works. But not in the reverse order I need