Bootstrap overflow-x:scroll in bootstrap modal

As title suggests I'm looking at how to realistically handle overflowing tabular content in a modal.

Trying to follow the vue/v-b instructions but obviously something is not perfect.

Have a modal something like below:

<b-modal v-bind:style="{ max-width: maxWidth }">
<b-container-fluid class="overflow-scroll-x">
{{ maxWidth }} //shows correct (90% of window) pixel count
<b-container-fluid>
</b-modal>

...

    created() {
  window.addEventListener('resize', this.handleResize)
  this.handleResize();
},
destroyed() {
  window.removeEventListener('resize', this.handleResize)
},

...

handleResize() {
   this.maxWidth = window.innerWidth * 0.9;
},

Anyone any ideas why the table is not scrolling but just overflowing?