bootstrap-vue b-modal overflow-y содержимое не прокручивается

Question

У меня есть следующий код, который делает небольшие эскизы изображений в b-carousel, При нажатии открывается b-dialog с большими изображениями в другом b-carousel с некоторым текстовым содержанием; это содержание вызывает необходимость прокручивать диалоговое окно по оси Y. Проблема, с которой я сталкиваюсь, заключается в том, что нет способа программно открыть диалоговое окно, чтобы его можно было прокручивать!

Обновление № 1: я попытался сфокусировать диалог $elменяется .modal-open { overflow-y: auto; }и еще несколько вещей, но, похоже, ничего не работает! Единственное, что работает, это открыть его, а затем нажать кнопку "Далее" для b-carousel который, кажется, помещает контент на место и включает прокрутку.

Обновление № 2: я еще немного покопался и похоже, что это position:relative что карусель установила! Если я верну это значение inherit, прокрутка работает, но это нарушает стиль кнопок управления. Я попытался также установить диалог position:relative но это никак не повлияло.

<template>
  <div class='thumbnail-wrapper-outer'>
    <b-modal ref="modal" size='lg' v-model="detailsOpen" @ok="closeDetails">
      <div>        
        <b-carousel v-model="imageNumber" controls indicators :interval="thumbnailCarouselInterval">
          <b-carousel-slide :key="photo.url" v-for="photo in hugePhotos" :img-width="photo.width" :img-height="photo.height" :img-src="photo.url"></b-carousel-slide>
        </b-carousel>     
      </div>
      <div>
         {{content}} <-- ... overflowing-y content here ... -->
      </div>
      <div slot="modal-footer" class="w-100">    
        <b-btn size="sm" class="float-right" @click="closeDetails">
          Close
        </b-btn>
      </div>
    </b-modal>
    <div class='thumbnail-wrapper-inner'>
      <div @click.stop.prevent="openDetails">
        <b-carousel v-model="imageNumber" class="thumb" controls indicators :interval="thumbnailCarouselInterval">
          <b-carousel-slide :key="photo.url" v-for="photo in smallPhotos" :img-width="photo.width" :img-height="photo.height" :img-src="photo.url"></b-carousel-slide>
        </b-carousel>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class Thumbnail extends Vue {
  @Prop(Object)
  smallPhotos!: any[];
  @Prop(Object)
  hugePhotos!: any[];
  @Prop(String)
  content!: string;
  detailsOpen: boolean = false;
  thumbnailCarouselInterval: number = 0;
  imageNumber: number = 0;
  fixScrolling() {
    (this.$refs.modal as any).$el.focus();
  }
  openDetails() {
    this.detailsOpen = true;
  }
  closeDetails() {
    this.detailsOpen = false;
  }
}
</script>

<style scoped lang="scss">
.thumbnail-wrapper-inner {
  &:hover {
    cursor: pointer;
  }
  .thumb {
    width: 120px;
  }
}
</style>