Refactor #5621

components/lib/tablist/TabList.vue

@@ -13,7 +13,7 @@
         >
             <component :is="templates.previousicon || 'ChevronLeftIcon'" aria-hidden="true" v-bind="ptm('previousIcon')" />
         </button>
-        <div ref="content" :class="cx('content')" @scroll="onScroll" v-bind="ptm('content')">
+        <div ref="content" :class="cx('content')" @scroll="onScroll" :style="{ height: $pcTabs.scrollHeight }" v-bind="ptm('content')">
             <div ref="tabs" :class="cx('tabs')" role="tablist" :aria-orientation="$pcTabs.orientation" v-bind="ptm('tabs')">
                 <slot></slot>
                 <span ref="inkbar" :class="cx('inkbar')" role="presentation" aria-hidden="true" v-bind="ptm('inkbar')"></span>

components/lib/tabs/BaseTabs.vue

@@ -22,6 +22,10 @@ export default {
             type: Boolean,
             default: false
         },
+        scrollHeight: {
+            type: String,
+            default: undefined
+        },
         showNavigators: {
             type: Boolean,
             default: true

components/lib/tabs/Tabs.d.ts

@@ -104,6 +104,10 @@ export interface TabsProps {
      * @defaultValue false
      */
     scrollable?: boolean | undefined;
+    /**
+     * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
+     */
+    scrollHeight?: string | undefined;
     /**
      * Whether to display navigation buttons in container when scrollable is enabled.
      * @defaultValue true