How to hide Scrollbar when overflow is auto

I'm using the tabs component enter link description here my list is long so I need it to scroll but I don't want the scrollbar to be shown.

the way I used the component is like this:

<tabs class="mt-4">
            <div class="card">
              <div class="p-3">
                <tab name="مشخصات ساختمان">
                  <BuildingInfoEdit :categoryList="categoryList" :id="id"/>
                </tab>
                <tab name="مالکین">
                  <BuildingOwner :categoryList="categoryList" :id="id"/>
                </tab>
                <tab name="درها و دیوارها">
                  <BuildingDoors :categoryList="categoryList" :id="id"/>
                  <br class="mt-5">
                  <BuildingWall :categoryList="categoryList" :id="id"/>
                </tab>
                <tab name="سایر مشخصات">
            <span class="d-flex justify-content-center text-center align-items-center">
              درحال حاضر این مرحله وجود ندارد
            </span>
                </tab>
                <tab name="کاربری ها">
                  <BuildingAvailLand :categoryList="categoryList" :id="id"/>
                  <div class="mt-5"></div>
                  <BuildingPropLand :categoryList="categoryList" :id="id"/>
                </tab>
                <tab name="پیش آمدگی ها">
                  <BuildingTerrace :categoryList="categoryList" :id="id"/>
                </tab>
                <tab name="سوابق شهرسازی">
                  <BuildingUrbanHistory :categoryList="categoryList" :id="id"/>
                </tab>
                <tab name="مشخصات مهندسین">
                  <span class="d-flex justify-content-center text-center align-items-center">
                    درحال حاضر این مرحله وجود ندارد
                  </span>
                </tab>
                <tab name="پارکینگ ها">
                  <BuildingParking :categoryList="categoryList" :id="id"/>
                </tab>
                <tab name="مشترکات و دهانه">
            <span class="d-flex justify-content-center text-center align-items-center">
              درحال حاضر این مرحله وجود ندارد
            </span>
                </tab>
                <tab name="سایر امکانات">
            <span class="d-flex justify-content-center text-center align-items-center">
              درحال حاضر این مرحله وجود ندارد
            </span>
                </tab>
                <tab name="ضمائم و نامه ها">
            <span class="d-flex justify-content-center text-center align-items-center">
              درحال حاضر این مرحله وجود ندارد</span>
                </tab>
                <tab name="توضیحات">
            <span class="d-flex justify-content-center text-center align-items-center">
              درحال حاضر این مرحله وجود ندارد</span>
                </tab>
              </div>
            </div>
          </tabs>

I need to scroll the menu but not show the scrollbar which can affect the style. I've tried the no-scroll method too but it just doesn't work. can anyone help with a solution or is there another component I can use for my tabs?