I want to implement scroll in bootstrap on my child component (ProductList.vue). Can anyone help me how to paste the code in boostrap 5? I've looked for the problem but haven't found it yet. This is my bootstrap 5 code on child component (ProductList.vue)

    <template>
        <div class="row d-flex justify-content-center">
          <div
            class="card text-center card-wrapper"
            style="width: 18rem"
            v-for="product in products"
            :key="product.item"
          >
            <img class="p-2" style="max-height:200px; height:100%" :src="product.imgUrl" alt="product.title" />
            <div class="card-body ">
              <h5 class="card-title text-truncate">{{ product.title }}</h5>
              <p class="card-text">$ {{ product.price }}</p>
              <a href="#" class="btn btn-primary">Add to cart</a>
            </div>
          </div>
        </div>
    </template>
    
    <script>
    import products from "../item/product.json";
    export default {
      name: "ProduckList",
      data() {
        return {
          products,
        };
      },
    };
    </script>
    
    <style scoped>
        .card-wrapper {
          background-color: rgb(149, 211, 247);
        }
    </style>

this is on parent component (App.vue)

    <template>
      <Header />
        <div class="row">
          <div class="col-8">
              <produck-list />
          </div>
          <div class="col-4">
            <Cart />
          </div>
      </div>
    </template>
    
    <script>
    import Header from "./components/Header.vue";
    import ProduckList from "./components/ProductList.vue";
    import Cart from "./components/Cart.vue";
    export default {
      components: {
        Header,
        ProduckList,
        Cart,
      },
    };
    </script>
    
    <style>
      body {
            background-color: rgb(13, 30, 37)!important;
          }
    </style>

I want the results of cards to be scrollable like this https://getbootstrap.com/docs/5.0/utilities/overflow/