How to avoid wrapping of elements in a long list with scrollbars in Firefox

Question

I have a long flex list which should wrap it's items (Buttons) when they have not enough space (flex-wrap). However, as soon as the list gets a scrollbar, the items will be wrapped in Firefox even if there is enough space.

Chrome displays the buttons side by side as expected.

(I use Vue here, to keep the HTML simple. It actually just creates the text/button element 30 times)

new Vue({
  el: "#app",
})

body, html {
  margin: 0;
}

.container {
  position: absolute; 
  height: 100vh; 
  overflow: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div class="container" id="app">
  <div v-for="(i, index) in 30" :index="i">
    Text
    <div class="row">
      <button>Button 1</button>
      <button>Button 2</button>
    </div>
    <hr />
  </div>
</div>